[JavaScript知识库] vue-cli2脚手架项目，如何使用less全局变量，解决@textColor is undefined问题

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue-cli2脚手架项目，如何使用less全局变量，解决@textColor is undefined问题 -> 正文阅读

[JavaScript知识库]vue-cli2脚手架项目，如何使用less全局变量，解决@textColor is undefined问题

??最近想实现个一键换肤，需要配置全局less，控制全局变量。

??刚开始卡住了，我是先后安装了style-resources-loader和vue-cli-plugin-style-resources-loader，以及less-loader和less，然后配置vue.config.js，这样搞的，但是不起作用，一直报错，但是朋友那里就没问题。我的报错内容如下：
在这里插入图片描述
??今天恍然大悟，突然反应过来大概是vue-cli的版本有所不同，因为我这里的是2版本的，朋友那里好像是3版本的，我创建的是基于 webpack 模板的脚手架项目。

??那么vue-cli2如何使用less全局变量呢？

1、安装

??首先安装一下sass-resources-loader

npm install sass-resources-loader --save-dev

??然后安装一下less-loader和less

npm install less-loader@5.0.0 --save
npm install less --save

在这里插入图片描述

2、创建全局less文件

??我是在项目的src文件夹下的assets文件夹下，新建了theme.less文件，代码如下：

@textColor: red;

在这里插入图片描述

3、配置

??找到项目的build文件夹下的utils.js文件，找到exports.cssLoaders = function (options) {}，添加下面代码：

path.resolve(__dirname, '../src/assets/theme.less') //这里是全局less的路径，根据自己的修改

??然后找到这个函数的return{}，把``改成下面代码：

less: generateLoaders('less').concat({
  loader: 'sass-resources-loader',
  options: {
	resources: path.resolve(__dirname, '../src/assets/theme.less')
  }
}),

??具体如下图所示：
在这里插入图片描述

4、测试

??我是在HelloWorld.vue文件里，进行测试，
在这里插入图片描述
??npm run dev运行后，可以看到是ok的，如下图所示：

5、`vue-cli3`时，可以通过配置`vue.config.js`

??关于我文章开头说的，先后安装style-resources-loader和vue-cli-plugin-style-resources-loader，以及less-loader和less，然后在根目录配置vue.config.js，这种方式，在vue-cli3时是可行的，关于vue.config.js的配置如下：

const path = require("path");
module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        //这里是全局less的路径，根据自己的修改
        path.resolve(__dirname, './src/assets/theme.less'),
      ],
    },
  },
};