#StackBounty: #reactjs #webpack #webpack-style-loader Add empty unused class names to react components

Bounty: 50

At the moment unused classNames are automatically removed from my components, if I don’t use them and “fill” them with CSS. I am developing a widget which can be used on foreign websites and want the give the users the possibility to write custom CSS on their website to effect the widget. On some places the classNames should base on an ID (like className={'question-'.question_id}.

I don’t know which part of my webpack is responsible for the removing of the classes. How can I disable it or better: How can I tell webpack to NOT remove this special classes?

const path = require('path');
const loaderUtils = require('loader-utils');

const HtmlWebPackPlugin = require("html-webpack-plugin");
const DotenvPlugin = require('webpack-dotenv-plugin');

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
  inject: "head"
});

const dotEnvPlugin = new DotenvPlugin({
  sample: './.env.default',
  path: './.env'
});

const getLocalIdent = (loaderContext, localIdentName, localName, options) => {
  .....
};

module.exports = {
  output: {
    library: 'XLVNT',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    filename: 'x.js',
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader"
          },
        ]
      },
      {
        test: /.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              localIdentName: 'x-[folder]-[local]',
              getLocalIdent: getLocalIdent,
            }
          }
        ]
      },
      {
        test: /.scss$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              localIdentName: 'x-[folder]-[local]',
              getLocalIdent: getLocalIdent,
            }
          } ,
          "sass-loader"
        ]
      },
      {
          test: /.(pdf|jpg|png|gif|svg|ico)$/,
          use: [
              {
                  loader: 'url-loader'
              },
          ]
      },
    ]
  },
  plugins: [dotEnvPlugin, htmlWebpackPlugin]
};


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.