如何在nuxt中引入scss

 

安裝scss所需要的依賴：

npm install --save-dev node-sass sass-loader

 

在assets文件夾下創建一個scss的入口文件，比如是main.scss，里面寫上自己的自定義樣式

在nuxt.config.js進行配置

 

 然后在每個頁面都可以用這個公共scss文件的樣式了，

如果想在頁面單獨引用某一個scss文件的樣式

下面這種方式是錯誤的：

import '~/assets/a1.scss'

應該這樣引用

<style src='../assets/a1.scss'></style>

 如果每個頁面 想使用入口scss文件的變量時，需要每個頁面都引入，很麻煩，那么我們可以這樣做：

npm install @nuxtjs/style-resources

在config配置文件中：

modules: [
    '@nuxtjs/style-resources'
  ],
styleResources: {
    scss: '~assets/css/main.scss'
  },

這樣在每個頁面中使用入口scss文件的變量就不用專門引入了

 

 

 

 

。