scss、sass 全局变量

使用场景

因为产品风格的统一性，需要抽象需要抽象一些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.js
rules: [
  {
      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来解析组件中的样式所以需要单独配置

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

</style>

以上代码vue-loader解析

sass-resources-loader使用如下：

// webpack.default.js
rules: [
  {
      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编译时都会自动导入配置的目标文件代码