配置全局less
- 第一步:安装 style-resources-loader
npm i style-resources-loader
- 第二步:配置webpack.config.dev.js
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
// importLoaders:1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
globalVars: {
'testcolor': 'red', // ten可以是ten,也可以是@ten,效果一样,下同
},
modifyVars: {
'primary-color': '#1DA57A'
}
}
},
// 在这里引入要增加的全局less文件
{
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname,'../src/pages/count/global.less')
}
}
]
},
.test{ // 所有className为test的都会生效
color: red
}
// 另一种办法,不引入全局文件,单独配置全局变量
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
// importLoaders:1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
globalVars: {
'primary': 'red', // ten可以是ten,也可以是@ten,效果一样,下同
},
}
},
]
},
.page{
color: @primary !important
}