webpack配置全局变量less文件

配置全局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')
            }
        }
    ]
},
  • 第三步: 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,效果一样,下同
                },
            }
        },
       
    ]
},

  • 全局变量使用方式,
    test.less
.page{
    color: @primary !important
}




  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值