webpack 配置全局样式（自定义的，vue-cli2/3）

一般的，引入全局设置的基本样式

@import './base.scss';

这样在引入scss文件中可以使用base里的全局变量
但是避免在资源文件中使用SASS@ import规则，因为它会降低增量构建的速度。直接在webpack config 中的sassResources数组中添加导入的文件。
以scss为例, 在自己配的webpack,和vue-cli2/3中配置全局样式引入
（sass-resources-loader也可以用来配置less）

自己配的webpack中

确保package.json有 node-sass ，sass-loader， style-loader
安装sass-resources-loader sass-resources-loader

cnpm i sass-resources-loader -D

再在配置中更改

module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          { loader: 'vue-style-loader' },
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } },
          { loader: 'sass-resources-loader',
            options: {
              sourceMap: true,
              resources:[path.resolve(__dirname, '../src/renderer/globals.scss'),]//一定是path.resolve的绝对路径
            }
          }
        ]
      },
}

vue-cli2中

安装sass-resources-loader
修改build中的utils.js

scss: generateLoaders('sass'),
//修改为
scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        //scss全局文件的路径
      resources: path.resolve(__dirname, '../src/renderer/globals.scss')
    }
  }
),

vue-cli3中

vue.config.js
不需要安装sass-resources-loader
只需要确保安装了node-sass sass-loader

module.exports = {
 css: {
        loaderOptions: {
            sass: {
                data: `
                  @import "@/src/renderer/globals.scss";
                   @import "@/src/renderer/base.scss";
                  `
            }
        }
    },
}

这样配置后在

<style lang="scss">
    .contentTitle{
        color:$color;
    }
</style>

直接使用