vue-cli4中使用less全局变量（4步）

（1）先下载less：npm i less-loader less --save-dev 

（2）再下载：npm i style-resources-loader --save-dev 

（3）在vue.config.js文件中配置：

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
   pluginOptions: { // 第三方插件配置
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [path.resolve(__dirname, './src/assets/css/base.less')] // less所在文件路径
        }
      }
  }

（4）在.less文件中编写变量，在.vue文件中使用该变量即可！

--注意：如果此时仍报错@bg变量没有声明，需再安装：npm i vue-cli-plugin-style-resources-loader --save-dev

// base.less文件中声明变量：
@bg:#f00; // 按钮主题色
@bg2:blue;
@font-family:PingFangSC;

// 在.vue文件中使用：
<style lang='less' scoped>
   .p{
       color:@bg; //声明的less样式变量
   }
</style>

参照：https://blog.csdn.net/wly_er/article/details/102676486?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

最后

以上就是美好龙猫为你收集整理的vue-cli4中使用less全局变量（4步）的全部内容，希望文章能够帮你解决vue-cli4中使用less全局变量（4步）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。