vue全局配置scss，在vue文件使用scss

下面是对scss文件的配置

1.安装sass-resources-loader

npm i sass-resources-loader --save-dev

2.修改build文件夹下utils.js，下面的options路径就是你要配置的scss文件的绝对路径

// https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    // 配置全局的scss文件  要添加的地方
    scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, './../src/assets/css/base.scss')
      }
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
           

在app.vue中引入base.scss

<style lang="scss">
@import url(assets/css/base.scss);
#app {
  width: 100vw;
  height: 100vh;
}
</style>
           

在vue文件中使用scss

安装node-sass，sass-loader注意安装版本，与node.js版本有关

sass-loader我的是7.3.1版本 node-sass版本为4.14.1 而我的nodejs版本为12多

在build文件夹下修改webpack.base.conf,在module的rules添加下面的配置即可

{
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
      }