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