webpack3和webpack4对应的sass-loader的版本是不同的,不能混用。
之前出现这样一个问题,webpack3上使用sass-loader@8.x.x,解析时出现错误:this.getResolve is not a function
webpack3 对应sass-loader@7.x.x版本,我这里使用7的最后一个版本7.3.1
webpack4 对应sass-loader@8.x.x版本,当前8最新版本为8.0.2
一、在Vue组件中使用scss
1.安装sass-loader node-sass
此处指定安装 sass-loader@7
npm i -D sass-loader@7 node-sass
2.修改webpack配置
修改文件build/webpack.base.conf.js
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
3.组件中使用
<style lang='scss'>
.title {
color: #000;
}
</style>
二、全局引入.scss样式文件
1.安装sass-resources-loader
npm i -D sass-resources-loader
2.修改配置
将build/utils.js文件中的:
scss: generateLoaders('sass')
修改为:
scss: generateLoaders('sass').concat({
loader: 'sass-resources-loader',
options: {
// 此处为需要引用的scss全局文件的路径
resources: path.resolve(__dirname, '../src/style/index.scss')
}
})