我想在我的输出 CSS 文件和从我的 React 组件渲染的 JSX 中缩小我的类名(用于最小的源保护目的),类似于这个 Webpack 插件:https://github.com/vreshch/optimize-css-classnames-plugin
有没有我可以使用的任何现有选项,Webpack 或其他方式?非常感谢。
来自:
<div className="long-class-name"></div>
.long-class-name {
}
收件人:
<div class="a"></div>
.a {
}
最佳答案
由于您已经在使用 Webpack,我认为一个不错的选择是使用 CSS Modules来完成那个。您可以使用 css-loader或 postcss-modules例如,这样做。
基本上,通过使用 CSS 模块,您可以 import
您的 CSS 并将其视为 JSON。所以,如果你写 .long-class-name { }
你会有这样的东西{ 'long-class-name': '<<interpolated name>>' }
.这里的技巧是 <<interpolated name>>
在我的示例中,您可以通过编程方式进行设置。
Webpack 有一些您可以使用的预定义标记,您可以在此处看到:https://github.com/webpack/loader-utils#interpolatename .您可以在此处查看示例:
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}
但是,如果您想要更“自定义”的东西,您可以指定 getLocalIdent
功能:
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
getLocalIdent: (context, localIdentName, localName, options) => {
return 'whatever_random_class_name';
}
}
}
]
}
请引用docs阅读有关 CSS Modules
选项的更多信息.
这样做,您可以按照需要的方式指定您的类名并解决您的问题。
希望对您有所帮助!
关于javascript - 缩小/破坏 JSX 中的 CSS 类名和 Webpack 的 CSS 输出(或其他编程方式),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48794232/