vue+webpack5项目中全局引入scss

一，安装插件

npm i sass-resources-loader -D  

二，修改wenpack的rule配置

 //全局引入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: [
              'src/style/_variables.scss' // 引入全局 SasS 变量的文件（对应你全局文件的路径）
            ]
          }
        }
      ]
    }

三，如果是vue-cli项目怎么办？

在vue.config.js中修改配置即可：

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

四，实现的效果：