vue 配置 scss

vue 配置 scss（局部）

1.安装依赖，输入命令 ： npm install sass-loader node-sass vue-style-loader --save-dev

2.找到/build/webpack.base.conf.js文件。如果需要在main.js中引入样式文件，不需要配置此文件。否则会编译报错。

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

3.使用 scss 

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

---

vue 配置 scss（全局引用变量）

1.安装依赖，输入命令：

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

2： 安装sass-resources-loader  （如果不安装的话变量会报错）

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

 

3： 修改build中的utils.js，或者在main.js中引入。

    scss: generateLoaders('sass'),

    修改成:

    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/style/main.scss') //这里写自己的文件路径
        }
      }
    )

4：在组件中的style标签添加lang="scss"。