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

項目啟動成功，編譯報錯問題解決