ExtractTextPlugin and postCSS - autoprefixer nie działa

Question

Próbuję skonfigurować WebPacka, aby miał przepustkę do kompilacji, w której skanuje wszystkie pliki css w jednym drzewie plików, a następnie generuje pliki CSS ze wszystkimi stylami w pakiecie, automatycznie skorygowanymi i zminimalizowanymi.

Nie mogę pobrać wtyczki autoprefiksu do działania.

Oto odpowiednia część 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') 
    ] 
} 
]; 

Kiedy biegnę WebPACK, mam wszystkie pliki skompresowane w bundle.js i prawidłowo wyodrębnione w osobnej styles.css pliku. Ale prefiksy dostawcy nie są stosowane.

Używam tej klasy przetestować prefiksy:

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

Próbowałem zmienić wywołanie ExtractTextPlugin.extract jak ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader']) jak widać na innych stanowiskach, ale to nie pomaga w ogóle .

Wszelkie pomysły?

Answer 1

Wygląda na to, że źle ustawiłeś parametry postcss. Zgodnie z dokumentacją w https://github.com/postcss/postcss-loader następujący kod powinien być umieszczony na najwyższym poziomie konfiguracji, a nie w sekcji module:

postcss: function() { 
    return [ 
    autoprefixer 
    ] 
} 

Update.

W rzeczywistości istnieje o wiele więcej konfiguracji do napisania tej integracji postcss i WebPack do pracy. Dzięki wątku mam znaleźć rozwiązanie https://github.com/postcss/postcss-loader/issues/8

Po pierwsze, w celu postcss aby móc do pracy na @import „ed plików postcss-import Wtyczka musi być używany. Zintegrowanie tej wtyczki z WebPack, specjalnego parametru pobranej z argumentów Funkcja inicjująca jest przekazywana jako argument do postcssImport tak (np włączyć plik oglądania na gorącym przeładunku lub przebudowy.):

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

Niestety, ten rozkłada obciążenie aktywów poprzez pakiet sieci Web podczas używania url(...) ze ścieżkami względnymi. Dzieje się tak, ponieważ postcss-import łączy wszystkie pliki ed w jeden, ale ścieżki pozostają w stosunku do początkowych katalogów plików. W celu przerobienia ścieżek względnych, postcss-url wtyczki powinny być wykorzystywane i konfiguracja wygląda teraz tak:

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