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
}