vue,一路走來（17）--vue使用scss，並且全局引入公共scss樣式

最近朋友問如何在vue項目中使用scss樣式，想起之前項目是直接在main.js直接import css文件的，然而main.js不可以直接import scss文件。

import './assets/css.css'

src/assets/scss.scss

$border-color:#c58f5d;
.box{
    width:100px;
    height: 100px;
    border:1px solid #f40;
}

第一步：安裝依賴

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

cnpm install sass-resources-loader --save-dev

第二步：配置build/utils.js

scss: generateLoaders('sass')
改成
scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/scss.scss')
        }
      }
    )

發現項目報錯：Module build failed: TypeError: this.getResolve is not a function

sass-loader的版本過高導致的編譯錯誤，當前最高版本是8.x，需要退回到7.3.1

運行：

npm uninstall sass-loader（卸載當前版本）

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

最后在vue組件中的style標簽中添加lang="scss"，就ok了。這樣我們就實現了全局引入scss。

<style lang="scss">
.box2{width:100px;height:100px;border:1px solid $border-color;}
</style>

 在webpack.base.conf.js中的module.rules添加如下配置，可以實現引入其余的scss文件

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

<style lang="scss">
@import '../../assets/other.scss';
.box2{width:100px;height:100px;border:1px solid $border-color;}
</style>