###使用场景 因为产品风格的统一性，需要抽象需要抽象一些css变量与方法，如下文件。

// common.scss$defaultSize: 12px !default;@function rem($px){  @return $px / $defaultSize * 1rem;}$primary-color: #3b94f3;$info-color: #70b4f9;$success-color: #1ed278;$warn-color: #ffa100;$danger-color: #ed6114;复制代码

##解决方式

每个scss文件引入common.scss（不推荐）

过于繁琐，维护性较差，如果是vue组件则每个组件都需要引入

在使用webpack打包时自动将common.scss打包到每个文件

需要安装sass-resources-loader，改插件抽闲scss(sass)代码到每个目标文件中

sass-resources-loader使用如下：

// webpack.default.jsrules: [  {      test: /\.scss$/,      use:  ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader', {            loader: 'sass-resources-loader',            options: {
   resources: path.resolve(__dirname, '../static/src/style/common.scss')}          }]    }]复制代码

由于vue使用vue-loader来解析组件中的样式所以需要单独配置

复制代码

以上代码vue-loader解析

sass-resources-loader使用如下：

// webpack.default.jsrules: [  {      test: /\.vue$/,      loader: 'vue-loader',      options: {        loaders: {          scss: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader', {            loader: 'sass-resources-loader',            options: {
   resources: path.resolve(__dirname, '../static/src/style/common.scss')}          }]        }      }  }]复制代码

配置完毕后每一个vue组件在webpack编译时都会自动导入配置的目标文件代码