scss、sass 全局变量

###使用场景 由于产品风格的统一性，须要抽象须要抽象一些css变量与方法，以下文件。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;
复制代码

##解决方式html

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

过于繁琐，维护性较差，若是是vue组件则每一个组件都须要引入vue

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

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

sass-resources-loader使用以下：web

// 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来解析组件中的样式因此须要单独配置sass

<style lang="scss" scoped="true"> </style>
复制代码

以上代码vue-loader解析post

sass-resources-loader使用以下：spa

// 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编译时都会自动导入配置的目标文件代码插件