ExtractTextPlugin и postCSS - autoprefixer не работает

Question

Я пытаюсь настроить webpack, чтобы иметь прохождение компиляции, где он сканирует все файлы css в одном дереве файлов, а затем генерирует файлы css со всеми связанными стилями, автоматически скомпонованными и сведенными к минимуму.

Я не могу заставить плагин autoprefixer работать.

Вот соответствующая WebPack конфигурации часть:

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 как ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader']), как показано в других постах, но это не помогает ,

Любые идеи?

Answer 1

Кажется, что вы упустили параметры postcss. Согласно документации на https://github.com/postcss/postcss-loader следующий код должен быть размещен на верхнем уровне конфигурации, а не под module раздел:

postcss: function() { 
    return [ 
    autoprefixer 
    ] 
} 

Update.

На самом деле для этой интеграции postcss и webpack необходимо написать больше настроек. Благодаря следующей теме я нашел решение https://github.com/postcss/postcss-loader/issues/8

Во-первых, для того, чтобы postcss, чтобы иметь возможность для работы на @import «эд файлы, postcss-import плагин должен быть использован. Для того, чтобы интегрировать этот плагин с WebPack, специальный параметр, взятая из аргументов функции Initializer в передаются в качестве аргумента postcssImport как это (например, включить файл, наблюдая за горячую перезагрузку или восстановления.):

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

К сожалению, это ломает загрузку активов пути webpack при использовании 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 
    ]; 
]