我正在尝试使用purify-css来移除应用程序中未使用的css类。
为了构建这个项目,我使用了React
、scss
、WebPack
和PostCss
来构建和编译所有内容。
到目前为止,我已经有所进展,但是出现了一些问题,我不知道为什么,预期的结果不正确。我只有非常基本的设置来测试这些场景,所以这是我的index.html和app.js文件(到目前为止,我的唯一文件):
index.html
<body>
<nav>
<a href="">home</a>
</nav>
<hr />
<div id="app"></div>
<footer class="my-other-heading"></footer>
</body>
app.js
class App extends React.Component {
render() {
return (
<h1 className="my-other-heading">Mamamia!</h1>
);
}
}
render(<App />, window.document.getElementById("app"));
我在使用CSS文件时,使用了Normalize.css(带有一堆CSS类)和仅仅3个自定义类:
.my-class {
background-color: #CCDDEE;
}
.my-heading {
color: red;
}
.my-other-heading {
color: blue;
}
期望的输出应该只包含以下这些类:
html, body, nav, a, hr, div, footer, h1, .my-other-heading
然而,它还有一些其他的类:
.my-heading, h2, h3, h4, [type='checkbox'] (and other similar, e.g.: [type='button']
为什么会出现这种情况?它几乎删除了应该删除的所有类,但有一些仍然存在,并且这些类显然没有在索引文件上使用。我不知道它们是否因为React方面的其他声明而继续存在,但我只参考了源代码文件。以下是我的purify-css配置:
为什么会出现这种情况?它几乎删除了应该删除的所有类,但有一些仍然存在,并且这些类显然没有在索引文件上使用。我不知道它们是否因为React方面的其他声明而继续存在,但我只参考了源代码文件。以下是我的purify-css配置:
new PurifyCSSPlugin({
paths: glob.sync([
path.join(__dirname, '..', 'src', '**/*.html'),
path.join(__dirname, '..', 'src', '**/*.js'),
]),
})