在vue-cli项目中使用scss

前言

最近想在一个使用vue-cli的小项目中,使用scss来编写样式;如果不需要引入公共的scss文件的话,那只需要在<style>中设置lang="scss"即可。但是一般使用scss的时候,都会设置公共文件进行引用,方便代码复用。所以,如果需要像普通引入公共scss文件的话,需要进行一些配置。

配置

安装相关依赖包

1
2
3
npm i node-sass --save-dev
npm i sass-loader --save-dev
npm i sass-resources-loader --save-dev

修改Loader配置

vue-cli项目的loader配置文件是build/utils.js

mark

然后新增一个函数,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function generateSassResourceLoader() {
let loaders = [
cssLoader,
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// 引入多个文件时用数组的形式传入,单个文件时可以直接使用如下形式
resources: path.resolve(__dirname, '../src/style/common.scss')
}
}
]
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}

最后把exports.cssLoadersreturn项中的scss属性值改成上面新增的函数:

1
scss: generateSassResourceLoader()

效果如下:

1
2
3
4
5
6
7
8
9
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateSassResourceLoader(), // 修改成自定义的loader函数
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}

使用

配置完后,就可以在vue文件使用引入的公共scss文件中的变量和样式了。

参考文档

  1. vue引入sass全局变量
  2. 在vue-cli中安装scss,且可以全局引入scss的步骤