webpack配置

发表于 更新于 阅读次数： 本文字数： 589 阅读时长 ≈ 1 分钟

webpack中加入less支持

webpack文档中说明
lessc的选项在webpack中都可以使用，可用的选项可以参考less文档:

1
2
3
4
5
6
7
8
9
10
11
12
13
rules: [{
    test: /\.less$/,
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "less-loader" // compiles Less to CSS
            options: {
                modifyVars:{"primary-color":"#00CEC1"}
            },
    }]
}]

lessc支持的选项与webpack配置中的名字并不是完全一致的，大部分只需要简单的转换为驼峰式即可，小部分略有不同，例如例子中写的 global-val 在loader的选项中是 globalVars 多了一个 ‘s’，所有选项对应的名称，可以在参考lessc源码。
参考：https://zhuanlan.zhihu.com/p/27439821