vue2 配置scss

1、安装文件

npm install --save-dev sass-loader

npm install --save-dev node-sass

 

2、配置 webpack.base.conf.js

找到webpack.base.conf.js文件的module模块下面的rules添加以下代码

  module: {
    rules: [
      ...
      {
        test: /.scss$/,
        loaders: ["style", "css", "sass"]
      },
     ...

注意：这里loaders和文件中其他配置不同加了s

3、使用

1、在使用的地方如下写法

<style lang="scss" scoped>
  div {
    a {
      color: red
     }
    }
</style>

2、@import外部导入，如果不加scoped如果在app.vue中导入那么就是全局scss

<style lang="scss" scoped>
 @import './assets/scss/global.scss';
 * {
  color: red
 }
</style>

这样写下面的覆盖外部引入的

报错

Module build failed: TypeError: this.getResolve is not a function

原因主要是我们sass-loader的版本太高，导致webpack编译时出错。

解决：打开我们的package.json，修改sass-loader的版本为7.3.1

执行命令，重新安装项目依赖

$ npm install

然后，启动项目

$ npm run dev

项目启动成功，编译报错问题解决