在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.cssLoaders的return项中的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的步骤