Vue webpack4下引入scss全局变量

sass-resources-loader引入sass全局变量

  sass-resources-loader可以使用共享变量和混合所有SASS样式，而不去每个文件都引用。

安装依赖

npm install --save-dev sass-resources-loader

修改sass配置

// generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    const loaders = []

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      loaders.push(MiniCssExtractPlugin.loader)
    } else {
      loaders.push('vue-style-loader')
    }

    loaders.push(cssLoader)

    if (options.usePostCSS) {
      loaders.push(postcssLoader)
    }

    if (loader) {
      // 修改这一块，当使用sass-resources时也需要引入'sass-loader'
      if (loader === 'sass-resources') {
        loaders.push({
          loader: 'sass-loader'
        })
      }
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    return loaders
  }

  function resolveResource(name) {
    return path.resolve(__dirname, '../src/styles/' + name);
  }

修改sass配置的调用

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // sass: generateLoaders('sass', {
    //   indentedSyntax: true
    // }),
    // scss: generateLoaders('sass'),
    sass: generateLoaders('sass-resources', {
      resources: [resolveResource('variables.scss')]
    }),
    scss: generateLoaders('sass-resources', {
      resources: [resolveResource('variables.scss')]
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }