Vue-cli3/vitejs/webpack使用style-resources-loader全局引入less/sass/scss全局变量

文档

• https://cli.vuejs.org/zh/guide/css.html
• https://www.npmjs.com/package/style-resources-loader

结合网上诸多无效方法，整理如下

方式一

注意是vue安装，不是npm！！！

vue add style-resources-loader

安装过程中选择less

修改根目录 vue.config.js 的patterns参数

// vue.config.js
const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "src/global.less")]
    }
  }
};

方式二

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 less-loader 传递 Less.js 相关选项
      less:{
         additionalData: `@import "~@/variables.less"`
       }      
    }
  }
}

方式三

cnpm i style-resources-loader -D

module.exports = {
  // 安装：style-resources-loader
  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule("less").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          // 这里的路径不能使用 @ 符号，否则会报错
          // patterns: ["./src/assets/reset1.less", "./src/assets/reset2.less"]
          patterns: "./src/assets/reset.less"
        })
        .end()
    })
  }
};

vitejs配置方式

文档

• https://cn.vitejs.dev/config/

// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "~@/variables.less"`
      }
    }
  }
})