使用React和Webpack

时间:2017-08-02 02:24:40

标签: reactjs webpack purifycss

我正在尝试使用purify-css为我的应用程序删除未使用的css类。

要构建此项目,我使用ReactscssWebPackPostCss来构建和编译所有内容。

到目前为止,我已经取得了进展,但是出了点问题,我不知道为什么,但预期结果不正确。我有一个非常非常基本的设置来测试这些场景,所以这是我的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"));

在我正在使用Normalize.css(带有一堆css classess)的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'),
  ]),
})

2 个答案:

答案 0 :(得分:8)

根据我自己的经验(在Web开发中为15岁以上),尝试自动删除CSS总是会带来超出其解决范围的问题。

类名称可能会在运行时发生更改,有时会以意外的方式发生变化。自动删除CSS在某种程度上等同于暂停问题:通常无法解决,特别是不可靠。

我不知道为什么您没有获得明显应该存在的类的原因。但是我不认为您应该首先尝试这样做。

到目前为止,对我来说最好的/唯一的解决方案是手动进行操作,并尝试保持清洁。

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

答案 1 :(得分:0)

你可以尝试这个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 }
    }), 
...