最近朋友问如何在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>
vue,一路走来（17）--vue使用scss，并且全局引入公共scss样式
原文：https://www.cnblogs.com/juewuzhe/p/11840816.html