vue 項目配置 scss

vue 配置 scss(局部)

一、輸入命名

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

二、找到/build/webpack.base.conf.js文件。如果需要在main.js中引入樣式文件，不需要配置此文件。否則會編譯報錯。

module: {
    rules: [{
        test: /\.(scss|css)?$/,
        loaders: ["style", "css", "sass"]
      },
    ]
}

三、使用方法

<style scoped lang="scss">
@import 'base.scss';
</style>

---

vue 配置 scss(全局引用)

一、輸入命名

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

二、安裝sass-resources-loader

npm install sass-resources-loader --save-dev

三、修改build中的utils.js，或者在main.js中引入。在組件中的style標籤添加lang="scss"。

    scss: generateLoaders('sass'),
 
    //修改成:
 
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/style/base.scss') //自定義文件名
        }
      }
    )