vue scss 使用 及 踩坑

1.安裝

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

若運行時報錯：

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

這是因為當前sass的版本太高，webpack編譯時出現了錯誤，找到package.json文件，將 "sass-loader": "^8.0.0"，更換成了 "sass-loader": "^7.3.1",

或者卸載當前版本，然后安裝指定的版本

npm uninstall sass-loader
npm install sass-loader@7.3.1 --save-dev

2.build/webpack.base.conf.js,在rules中添加scss規則

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}

3.在vue文件中添加

<style lang='scss'>
</style>

必須添加，無論是引入文件還是頁面里寫，若引入文件未寫則不會生效。

 

4.全局引用時需要安裝sass-resources-loader

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

5.修改build中的utils.js

將

scss: generateLoaders('sass')

修改為：

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        //你自己的scss全局文件的路徑
      resources: path.resolve(__dirname, '../src/assets/css/common.scss')
    }
  }
)