使用webpack将包装类添加到较少的文件中

Question

我使用的是webpack v5.74.0。

我想在构建时使用webpack为所有CSS规则添加一个自定义类。参考示例

.input-text {color: red}应该变成.container .input-text {color: red}

需要在较少的文件中添加自定义包装类。在webpack中找不到任何为该容器类添加前缀的加载程序。

请提出建议。

Answer 1

在您的webpack配置中尝试以下代码，为项目中存在的所有类添加一个包装类。

module: {
rules: [
{
test: /.(css|less)$/i,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: {
"postcss-increase-specificity": {
stackableRoot: `.container`,
repeat: 1,
},
},
},
},
},
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
},
],
}