添加空的未使用 class 名称以响应组件

Question

目前未使用的类名会自动从我的组件中删除，如果我不使用它们并且 "fill" 它们与 CSS 一起使用。我正在开发一个可以在外国网站上使用的小部件，并希望让用户能够在他们的网站上编写自定义 CSS 来影响小部件。在某些地方，classNames 应该基于 ID（比如 className={'question-'+question_id}.

我不知道我的 webpack 的哪一部分负责删除类。我怎样才能禁用它或更好：如何告诉 webpack 不要删除这个特殊的类?

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

Answer 1

如果您想让别人使用您的组件或组件库，您应该更多地考虑 "props" 而不是 css classes 进行样式自定义。

如果您需要您的 Widget 的用户能够完全操纵您的组件的样式，您有很多选择，而不必预先在所有元素上编写class名称。

我发现最常见的是让您的组件接收属性 altClass 或 className 然后在您的组件包装器中使用它。这样用户可以分配一个 class 来自己控制样式。

这个属性甚至可以是一个对象，其中包含一堆 css key/values，您可以用相同的方式将其应用于组件中的多个元素。

我希望这能回答你的问题。

如果你想要灵感，你应该检查一些开源 UI 库，比如 Material UI or Ant Design，它们可以很好地处理这种情况。

让我们暂时搁置 React。假设您有一个接收两个参数的函数：id 和 className。 id 来自您的用户页面上的一个元素 className 是一个对应于 class 的字符串，将用于自定义内容。

webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'colorme.js',
    library: 'colorme'
  }
};

index.js

export function addThings(id, className) {
  document.getElementById(id)
    .innerHTML = (
      '<div class="'+ className +'">Testing things</div>'
    )
}

此函数 addThings 将在您的元素（id 中）注入一个 div 和可配置的 className.

然后，在您的用户页面中：

<html>
  <head>
    <style>
      .asd {
        background-color: red;
      }
      .awd {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="test"></div>
    <script type="text/javascript" src="./colorme.js"></script>
    <script>
      window.colorme.addThings('test', 'asd')
      // window.colorme.addThings('test', 'awd')
      // ...
    </script>
  </body>
</html>

你会看到添加了"Testing things"div，分别是class"asd"或"awd"。现在您的用户可以控制 div 的外观。

如果这对您有用，请在此处阅读更多内容：https://webpack.js.org/guides/author-libraries/

如果传递选项很重要，您可以使用 data-* 属性，如下所示：

<style>
  .asd {
    background-color: red;
  }
  .awd {
     background-color: blue;
  }
</style>
<div data-root_class="asd" data-some_other_class="lala" id="test"></div>
<script type="text/javascript" src="./colorme.js"></script>
<script> colorme.init('test') </script>

Answer 2

这里看起来有点不对劲的第一件事是 class 名称连接。请使用 es6 字符串文字。如下所示：

className={`question-.${question_id}`}

除此之外，您可以尝试使用 https://github.com/JedWatson/classnames

中的 classnames

如果有帮助，请告诉我。

添加空的未使用 class 名称以响应组件

Add empty unused class names to react components

reactjs

webpack

webpack-style-loader