Xóa css không sử dụng với React và Webpack

Tôi đang cố gắng xóa các lớp css không sử dụng khỏi ứng dụng của mình bằng cách sử dụng purify-css cho WebPack.Xóa css không sử dụng với React và Webpack

Để xây dựng dự án này, tôi đang sử dụng React, scss, WebPack và PostCss để xây dựng và biên dịch mọi thứ.

Cho đến nay tôi đã có thể có tiến bộ, nhưng có điều gì đó sai và tôi không biết tại sao, nhưng kết quả mong đợi là không chính xác. Tôi có một thiết lập rất rất cơ bản chỉ để thử nghiệm các kịch bản, vì vậy đây là index.html của tôi và app.js files (các tập tin duy nhất mà tôi có cho đến nay):

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"));

Trên file css tôi đang sử dụng Normalize.css (với một loạt các css thể học) và chỉ cần 3 lớp tùy chỉnh:

.my-class { 
    background-color: #CCDDEE; 
} 

.my-heading { 
    color: red; 
} 

.my-other-heading { 
    color: blue; 
}

Sản lượng dự kiến nên chỉ chứa các lớp:

html, body, nav, a, hr, div, footer, h1, .my-other-heading

Tuy nhiên nó có một số lớp khác:

.my-heading, h2, h3, h4, [type='checkbox'] (and other similar, e.g.: [type='button']

Tại sao điều này xảy ra? Nó loại bỏ gần như tất cả các lớp cần, nhưng một số trong chúng vẫn còn ở đây, và các lớp rõ ràng không được sử dụng trên tệp chỉ mục. Tôi không biết nếu họ vẫn tồn tại vì một số tuyên bố khác về phía React, nhưng tôi chỉ đề cập đến các tập tin src. Đây là của tôi cấu hình thanh tẩy-css:

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

Nguồn

2017-08-02 celsomtrindade

Cùng một vấn đề. Bạn đã tìm thấy một giải pháp? – BugHunterUK

@BugHunterUK chưa được .. Cách tôi đã có thể làm cho nó "làm việc" nó không loại bỏ tất cả các lớp không sử dụng. Luôn có thứ gì đó bị bỏ lại phía sau. – celsomtrindade

Bạn có thể thử mẫu webpack.config này, Nó dải mọi tầng lớp không sử dụng từ các tập tin CSS và Sass, tuy nhiên, nó bổ sung thêm các lớp học từ 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 } 
    }), 
...

Nguồn

2017-10-09 16:12:51

Xóa css không sử dụng với React và Webpack

Trả lời

Các vấn đề liên quan