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. --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>