Add wrapper class to less files using webpack

Question

I am using webpack v5.74.0.

I want to add a custom class to all CSS rules at build time using webpack. Example for reference

.input-text {color: red} should become .container .input-text {color: red}

Custom wrapper class needs to be added inside less files. Not able to find any loader in webpack to prefix this container class.

Please suggest.

Answer 1

try the below code in your webpack config to add a wrapper class for all classes present in your project.

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,
 },
 },
 },
 ],
 },
 ],
 }