删除未使用的CSS与React和Webpack

我试图从我的应用程序中使用purify-css WebPack删除未使用的CSS类。删除未使用的CSS与React和Webpack

要构建此项目，我使用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"));

在我使用Normalize.css（与一群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文件。这是我的净化，CSS配置：

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

来源

2017-08-02 celsomtrindade

同样的问题。你找到解决方案吗？ – BugHunterUK

@BugHunterUK还没有..我能够使它“工作”的方式并不会删除所有未使用的类。总会有东西留下。 – celsomtrindade

你可以试试这个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-09 16:12:51

删除未使用的CSS与React和Webpack

回答

相关问题