निकालें टेक्स्टप्लगिन और पोस्टसीएसएस - ऑटोप्रिफ़िक्सर काम नहीं कर रहा है

Question

मैं एक संकलन पास रखने के लिए वेबपैक सेट अप करने की कोशिश कर रहा हूं जहां यह एक फ़ाइल पेड़ में सभी सीएसएस फ़ाइलों को स्कैन करता है और फिर सभी शैलियों के साथ एक सीएसएस फाइलें बंडल, ऑटोप्रिफिक्स्ड और कम से कम बनाता है।

मुझे काम करने के लिए autoprefixer प्लगइन नहीं मिल सकता है।

यहाँ प्रासंगिक webpack config हिस्सा है:

const webpack = require('webpack') 
const path = require('path') 
const glob = require('glob') 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

// postCSS plugins 
const autoprefixer = require('autoprefixer') 

module.exports = [ 
{ 
    // another compilation pass 
}, 
{ 
    name: 'static-css', 
    entry: { 
    vendor: glob.sync(path.join(__dirname, 'assets/stylesheets/vendor/**/*.css')), 
    styles: glob.sync(path.join(__dirname, 'assets/stylesheets/src/**/*.css')) 
    }, 
    devtool: 'source-map', 
    output: { 
    path: path.join(__dirname, 'assets/stylesheets/build/'), 
    filename: 'bundle.js', 
    }, 
    module: { 
    loaders: [ 
     // css loader for custom css 
     { 
     test: /\.css$/, 
     include: path.join(__dirname, 'assets/stylesheets/src'), 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') 
     }, 
     // css loader for vendor css 
     { 
     test: /\.css$/, 
     include: path.join(__dirname, 'assets/stylesheets/vendor'), 
     loader: 'style-loader!css-loader' 
     }, 
     // other loaders for images, fonts, and svgs 
     { 
     test: /\.png$/, 
     loader: 'url-loader?limit=100000' 
     }, 
     { 
     test: /\.jpg$/, 
     loader: 'file-loader' 
     }, 
     { 
     test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/font-woff' 
     }, 
     { 
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/octet-stream' 
     }, 
     { 
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'file' 
     }, 
     { 
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=image/svg+xml' 
     } 
    ], 
    postcss: function() { 
     return [ 
     autoprefixer 
     ] 
    } 
    }, 
    plugins: [ 
    // extract css in a .css file 
    new ExtractTextPlugin('[name].css') 
    ] 
} 
]; 

जब मैं webpack चलाने के लिए, मैं सभी bundle.js में संकुचित और सही ढंग से एक अलग styles.css फ़ाइल में निकाली गई फ़ाइलों मिलता है। लेकिन विक्रेता उपसर्ग लागू नहीं होते हैं।

मैं उपसर्गों परीक्षण करने के लिए इस वर्ग का उपयोग कर रहा:

.autoprefixer-test { 
    display: flex; 
    transition: all .5s; 
    background: linear-gradient(to bottom, white, black); 
    user-select: none; 
} 

मैं ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader']) तरह ExtractTextPlugin.extract के रूप में अन्य पदों में देखा कॉल बदलने की कोशिश की है, लेकिन यह सब पर मदद नहीं करता है ।

कोई विचार?

Answer 1

ऐसा लगता है कि आपने postcss पैरामीटर को गलत स्थान दिया है। https://github.com/postcss/postcss-loader पर दस्तावेज़ के अनुसार निम्नलिखित कोड आपके विन्यास के शीर्ष स्तर पर रखा जाना चाहिए module धारा के तहत नहीं:

postcss: function() { 
    return [ 
    autoprefixer 
    ] 
} 

अद्यतन।

वास्तव में पोस्टकैस और वेबपैक के इस एकीकरण के लिए काम करने के लिए बहुत अधिक कॉन्फ़िगरेशन लिखा जाना है। निम्नलिखित धागा के लिए धन्यवाद मैं postcss के लिए आदेश में, समाधान मिल गया है https://github.com/postcss/postcss-loader/issues/8

पहले @import पर काम करने के लिए सक्षम होने के लिए 'एड फ़ाइलें, postcss-import प्लगइन का इस्तेमाल किया जाना चाहिए। webpack के साथ इस प्लगइन को एकीकृत करने के लिए, विशेष पैरामीटर ऐसा postcssImport को प्रारंभकर्ता के समारोह तर्क से लिया एक तर्क के रूप पारित हो जाता है (उदाहरण के लिए गर्म पुन: लोड या पुनर्निर्माण के लिए देख रहा है फ़ाइल सक्षम करें।):

var autoprefixer = require('autoprefixer'); 
var postcssImport = require('postcss-import'); 
.... 
postcss: function(webpack) { 
    return [ 
    postcssImport({ addDependencyTo: webpack }), // should be first 
    autoprefixer 
    ]; 
] 

दुख की बात है, इस के माध्यम से संपत्ति लोड हो रहा है टूट जाता है सापेक्ष पथ के साथ url(...) का उपयोग करते समय वेबपैक। ऐसा इसलिए होता है क्योंकि postcss-import सभी @import 'ed फ़ाइलों को एक में विलय करता है, लेकिन पथ प्रारंभिक निर्देशिकाओं के सापेक्ष बने रहते हैं। आदेश संबंधित पथ को फिर से लिखने के लिए, postcss-url प्लगइन का इस्तेमाल किया जाना चाहिए और विन्यास अब इस तरह दिखता है:

var autoprefixer = require('autoprefixer'); 
var postcssImport = require('postcss-import'); 
var postcssUrl = require('postcss-url'); 
.... 
postcss: function(webpack) { 
    return [ 
    postcssImport({ addDependencyTo: webpack }), 
    postcssUrl(), 
    autoprefixer 
    ]; 
]