[Vuejs] 在vue各個組件中應用全局scss變量

需要安裝一個插件：sass-resources-loader

1、執行安裝命令：

npm i sass-resources-loader --save-dev

2、修改vue-cli環境下build文件夾下utils.js，找到scss加載位置：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

修改為：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader', // 為了scss全局變量能在vue文件中使用
      options: {
        resources: path.resolve(__dirname, './../src/assets/scss/_var.scss')
      }
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

3、在_var.scss中定義變量：

// 自定義主題色
$theme-color: #008dfa;

4、在vue組件中使用自定義的變量：

<style lang="scss">
.site-wrapper-main{
   box-shadow: inset 0px 0px 1px 0px $theme-color;
}
</style>