刪除未使用的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

回答

相關問題