प्रतिक्रिया और वेबपैक

के साथ अप्रयुक्त सीएसएस को हटाएं मैं वेबपैक के लिए purify-css का उपयोग करके अपने ऐप से अप्रयुक्त सीएसएस कक्षाओं को निकालने का प्रयास कर रहा हूं।प्रतिक्रिया और वेबपैक

इस परियोजना मैं React, scss, WebPack और PostCss usin कर रहा हूँ का निर्माण और सब कुछ संकलित करने के लिए का निर्माण करने के लिए।

अब तक मैं प्रगति करने में सक्षम था, लेकिन कुछ गड़बड़ है और मुझे नहीं पता क्यों, लेकिन अपेक्षित परिणाम सही नहीं है। मैं एक बहुत ही बहुत बुनियादी सेटअप बस इन परिदृश्यों का परीक्षण करने के लिए है, तो यह मेरी 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 उपयोग कर रहा हूँ (सीएसएस क्लासेस का एक समूह के साथ) और सिर्फ 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']

हो रहा क्यों है? यह लगभग सभी वर्गों को हटा रहा है, लेकिन उनमें से कुछ अभी भी यहां हैं, और कक्षाएं जो स्पष्ट रूप से इंडेक्स फ़ाइल पर उपयोग नहीं की जा रही हैं। मुझे नहीं पता कि क्या वे प्रतिक्रिया पक्ष पर कुछ अन्य घोषणाओं के कारण बने रहते हैं, लेकिन मैं केवल src फ़ाइलों को रेफर कर रहा हूं। ये मेरा शुद्ध-सीएसएस config है:

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

स्रोत

2017-08-02 celsomtrindade

वही मुद्दा। क्या आपको एक समाधान मिला? – BugHunterUK

@BugHunterUK अभी तक नहीं .. जिस तरह से मैं इसे "काम" करने में सक्षम था, यह सभी अप्रयुक्त वर्गों को हटा नहीं देता है। हमेशा कुछ पीछे छोड़ दिया जाता है। – celsomtrindade

आप इस webpack.config नमूना कोशिश कर सकते हैं, यह सीएसएस और एस.ए.एस.एस. फाइलों से सभी अप्रयुक्त वर्गों स्ट्रिप्स, तथापि, यह 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

प्रतिक्रिया और वेबपैक

उत्तर

संबंधित मुद्दे