webpack5 scss变量全局实现

最近公司项目需要做换肤功能，使用scss作为样式开发，频繁的引入变量让人难受，就想到可以作为全局引入方式，减少变量的引入。项目使用webpack打包，故只需在配置module.rules中如下配置即可：

 //全局引入scss变量
  {
      test: /\.(css|scss|sass)$/,
      use: [
        !prodMode
          ? 'style-loader'
          : {
              loader: MiniCssExtractPlugin.loader,
              options: {
                publicPath: '../'
              }
            },
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [
              // 引入全局 SasS 变量的文件（对应你全局文件的路径）
              'src/style/_variables.scss'               
            ]
          }
        }
      ]
    }

若是使用vue-cli则需要如下配置：

module.exports = {
    css: {
      loaderOptions: {
        scss: {
            // 引入全局 SasS 变量的文件（对应你全局文件的路径）
            prependData: `@import "@/style/tools/index.scss";@import "@/style/settings/var.scss";`
        },
      }
    }
}