在配置全局变量之前,请先确保项目中已安装less并已正确配置,如未安装请移步这篇文章, 如何在react项目中使用less,或复制地址查看https://juejin.cn/post/6920785530963623943
首先我们在src下建立common.less
文件,作为我们全局变量的文件,并设置主题色变量
@themeColor: green;
定义好全局主题色以后,就可以在需要用主题色的less文件中引入common.less
文件
//使用less结束的分号;一定不能少
@import "./common.less";
.btn {
background: @themeColor;
color: #fff;
}
如果不引入common就会报一个错
那么问题来了,一个项目肯定有很多个样式文件,那么每个文件都需要引入common.less
文件,这也太麻烦了,还有一种方法就是修改webpack.config.js
配置,没错,还是上个文章修改的文件,还是修改同样的地方,熟悉的配方,熟悉的味道.
当然我们还需要安装一个插件style-resource
,在终端中输入npm install style-resources-loader --save
或 yarn add style-resources-loader --save
安装好以后打开webpack.config.js
找到我们刚才修改的地方
我们需要修改use
内容
同样还是修改两个地方,修改的代码如下:
{
test: lessRegex,
exclude: lessModuleRegex,
use: [
...getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'less-loader'
),
{
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, '../src/common.less'),
},
},
],
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: lessModuleRegex,
use: [
...getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'less-loader'
),
{
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, '../src/common.less'),
},
},
],
},
修改好配置以后重启项目,一定要重启项目,然后就可以在项目的任意less文件中,直接用在common.less
中定义好的变量了。