一般的萌丈，引入全局設(shè)置的基本樣式

@import './base.scss';

這樣在引入scss文件中可以使用base里的全局變量
但是避免在資源文件中使用SASS@ import規(guī)則南窗，因為它會降低增量構(gòu)建的速度揍很。直接在webpack config 中的sassResources數(shù)組中添加導(dǎo)入的文件。
以scss為例, 在自己配的webpack,和vue-cli2/3中配置全局樣式引入
（sass-resources-loader也可以用來配置less）

自己配的webpack中l(wèi)ess||scss

確保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中scss

安裝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-cli2中l(wèi)ess

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

less: generateLoaders('less')
//修改為
 less: generateLoaders('less').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/components/libs/css/skin.less')
      }
    }),

vue-cli3中scss

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

module.exports = {
 css: {
        loaderOptions: {
//less: {
     //   resources: [path.resolve(__dirname, "@/assets/css/common.less")]
//}
            sass: {
                data: `
                  @import "@/src/renderer/globals.scss";
                   @import "@/src/renderer/base.scss";
                  `
            }
        }
    },
}

有些會報錯

module.exports = {
 css: {
        loaderOptions: {
            sass: {
              // data: `@import "./src/styles/main.scss";`  // 舊的寫法
              prependData: `@import "./src/styles/main.scss";`  // 新的寫法
            }
        }
    },
}
  

這樣配置后在

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

直接使用

vue-cli3中l(wèi)ess (方法1)

vue.config.js

cnpm i style-resources-loader -D

確保安裝了node-sass sass-loader

module.exports = {
  chainWebpack: (config) => {
    ...
      const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
      types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    },

   css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            },
        }
    },
}
function addStyleResource(rule) {
    rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, './src/style/common.less'),
            ],
        })
}

vue-cli3中l(wèi)ess (方法2)

vue.config.js

vue add style-resources-loader 

  "style-resources-loader": {
            preProcessor: "less",
            patterns: [
                //這個是加上自己的路徑，
                // path.resolve(__dirname, "./src/style/mixin.less"),
                path.resolve(__dirname, "./src/style/_var.less"),
                path.resolve(__dirname, "./src/style/common.less")
            ]
        }