VUE：Vue2/Vue3全局引入.lees文件的CSS变量

简介

记录关于全局引入less变量的方式之一。

具体实现

1.先安装插件

检查package.json 中已有哪些 less 插件

style-resources-loader
vue-cli-plugin-style-resources-loader
less-loader
less

一键安装命令

npm install style-resources-loader vue-cli-plugin-style-resources-loader less-loader less -d

2.在vue.config.js文件中配置

const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
// less设置，注意less-loader的版本，避免与UI库等插件的版本冲突
// 如ant design 2.x 3.x需要less-loader 6.x以上
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [resolve('src/assets/styles/common/variable.less')], // 此处即变量样式文件路径，可多个
    },
  },
}

注意

如果是在 Vue3 + TS 的项目中如上使用，会有一个报错

解决办法：在根目录的 ‘.eslintrc.js’ 文件中增加rules的配置

'@typescript-eslint/no-var-requires': 0

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术