在vue-cli中使用sass

在vue-cli中使用sass

在vue-cli低版本中（3以下），我们需要自己在node中去配置css预处理器sass/less，配置方式如下

1. 安装

npm install node-sass --save-dev      //--save表示本地安装
			                          // -dev 表示开发时依赖（development n.研发，开发）
npm install sass-loader@7.3.1 --save-dev   //@：表示指定版本号下载

同样的控制版本下载的方式还有**@** 、**~**两种方式
^ ：会匹配最新的大版本依赖包，比如^1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0

_{：会匹配最近的小版本依赖包，比如}1.2.3会匹配所有1.2.x版本，但是不包括1.3.0

2. 配置

module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
        //这一部分是我们新添加的
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

3.使用

<style lang="scss" scoped >
</style>

可能遇到的问题

编译出错，ModuleBuildError

./node_modules/vue-style-loader!./node_modules/css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/style-compiler?{“vue”:true,“id”:“data-v-469af010”,“scoped”:false,“hasInlineConfig”:false}!./node_modules/sass-loader/dist/cjs.js?{“indentedSyntax”:true,“sourceMap”:true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue
4:14-400 13:3-17:5 14:22-408

这个将sass-load的版本降低就下就好了
在package.json中将

"sass-loader": "^8.0.0",    

改为

"sass-loader": "^7.3.1", 

如果还需要引入.scss文件的话还需 参考下面链接
vue-cli中配置全局sass变量

更多参考

vue-cli中如何使用sass