20

我正在尝试使用purify-css for WebPack 从我的应用程序中删除未使用的 css 类。

为了构建这个项目，我正在使用React, scss,WebPack并PostCss构建和编译所有内容。

到目前为止，我能够取得进展，但有一些问题，我不知道为什么，但预期的结果不正确。我有一个非常基本的设置来测试这些场景，所以这是我的 index.html 和 app.js 文件（我目前仅有的文件）：

索引.html

<body>
    <nav>
        <a href="">home</a>
    </nav>
    <hr />
    <div id="app"></div>
    <footer class="my-other-heading"></footer>
</body>

应用程序.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 方面的其他声明而持续存在，但我仅引用 src 文件。这是我的 purify-css 配置：

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

2 回答 2

12

根据我自己的经验（15 岁以上的 Web 开发人员），尝试自动删除 CSS 总是带来比它解决的问题更多的问题。

类名可能会随着运行时间而改变，有时会以意想不到的方式发生变化。自动删除 CSS 在某种程度上等同于停机问题：通常无法解决，特别是也不可靠。

我不知道为什么你没有得到显然应该在那里的课程。但我认为你不应该首先尝试这样做。

到目前为止，对我来说最好/唯一的解决方案是手动完成，并尽量保持清洁。

我意识到这可能不是您正在寻找的答案。

于 2020-01-24T15:23:29.043 回答
1

你可以试试这个 webpack.config 示例，它会从 CSS 和 SASS 文件中删除所有未使用的类，但是，它会从 normalize.css 添加类

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
          publicPath: '/dist'
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
          publicPath: '/dist'
        })
      },  
...
  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 }
    }), 
...
于 2017-10-09T16:12:51.917 回答