vue中使用scss并配置全局样式

一、基本使用

1.安装

npm install sass-loader@7.3.1 --save-dev
npm install node-sass --save --save-dev

2.使用

<style lang="scss" scoped>
</style>

1.注意：vueCli中 build/utils.js 已经对sass，less等进行处理，不用再webpack.base.conf.js配置，否则会起冲突。

2.注意：build/utils.js不兼容高版本sass-loader，如报错 loaderContext.getResolve is not a function at getWebpackImporter，试试卸载高版本 sass-loader，安装低版本。

二、配置全局样式

1.安装

npm install sass-resources-loader --save-dev

2.配置 build/utils.js

// 修改sass编译器loader的配置
less: generateLoaders('less'), // 若使用全局less，替换此处
// scss: generateLoaders('sass'), // 将此处替换成下面方法
scss: generateLoaders('sass').concat( // lodaer处理scss时.concat()方法，合并了公共scss
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/style/common.scss') //全局scss文件路径
    }
  }
)

3.重启服务