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編譯時都會自動導入配置的目標文件代碼