reactjs – 用React和Webpack删除未使用的css

发布时间：2020-12-15 20:49:26 所属栏目：百科来源：网络整理

导读：我正在尝试使用 purify-css for WebPack从我的应用程序中删除未使用的css类. 为了构建这个项目,我在React,scss,WebPack和PostCss中使用它来构建和编译所有东西. 到目前为止,我已经取得了进展,但有一些问题,我不知道为什么,但预期结果不正确.我有一个非常非常

我正在尝试使用 purify-css for WebPack从我的应用程序中删除未使用的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 classess)和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方面的其他声明而持续存在,但我只引用了src文件.这是我的purify-css配置：

new PurifyCSSPlugin({
  paths: glob.sync([
    path.join(__dirname,'..','src','**/*.html'),path.join(__dirname,'**/*.js'),]),})

您可以尝试这个webpack.config示例,它从CSS和SASS文件中删除所有未使用的类,但是,它添加了来自normalize.css的类

module: {
    rules: [
      {
        test: /.css$/,use: ExtractTextPlugin.extract({
          fallback: 'style-loader',use: 'css-loader',publicPath: '/dist'
        })
      },{
        test: /.scss$/,use: ['css-loader','sass-loader'],...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack2 - purify css',minify: {
        collapseWhitespace: true,},hash: true,template: './src/index.html'
    }),new ExtractTextPlugin({
      filename: '[name].css',disable: false,allChunks: true
    }),new PurifyCSSPlugin({
      paths: glob.sync(path.join(__dirname,'src/*.html')),purifyOptions: { info: true,minify: false }
    }),...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!