ExtractTextPlugin và postCSS - autoprefixer không hoạt động

Question

Tôi đang cố gắng thiết lập webpack để có một biên dịch vượt qua nơi nó quét tất cả các tệp css trong một cây tệp và sau đó tạo ra một tệp css với tất cả các kiểu đi kèm, tự động sửa và thu nhỏ.

Tôi không thể tải plugin autoprefixer để hoạt động.

Đây là liên quan phần 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') 
    ] 
} 
]; 

Khi tôi chạy webpack, tôi nhận được tất cả các file nén trong bundle.js và đúng chiết xuất trong một tệp riêng styles.css. Nhưng tiền tố của nhà cung cấp không được áp dụng.

Tôi đang sử dụng lớp này để kiểm tra các tiền tố:

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

Tôi đã cố gắng để thay đổi cuộc gọi đến ExtractTextPlugin.extract như ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader']) như đã thấy trong bài viết khác, nhưng nó không giúp gì cả .

Bất kỳ ý tưởng nào?

Answer 1

Dường như bạn đã đặt sai thông số postcss. Theo tài liệu tại https://github.com/postcss/postcss-loader đoạn mã sau nên được đặt ở cấp cao nhất của cấu hình của bạn và không thuộc thẩm module phần:

postcss: function() { 
    return [ 
    autoprefixer 
    ] 
} 

Update.

Thực tế có nhiều cấu hình hơn được viết để tích hợp các postcs và webpack này hoạt động. Nhờ chủ đề sau tôi đã tìm thấy giải pháp https://github.com/postcss/postcss-loader/issues/8

Đầu tiên, để postcss có thể hoạt động trên @import 'các tệp ed, postcss-import plugin cần được sử dụng. Để tích hợp plugin này với webpack, tham số đặc biệt lấy từ đối số chức năng khởi tạo được thông qua như là một cuộc tranh cãi để postcssImport như thế này (ví dụ như cho phép tập tin xem cho nạp lại nóng hoặc xây dựng lại.):

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

Đáng buồn thay, điều này phá vỡ bốc tài sản thông qua webpack khi sử dụng url(...) với các đường dẫn tương đối. Điều này xảy ra vì postcss-import hợp nhất tất cả các tệp ed2 @import thành một, nhưng đường dẫn vẫn còn tương đối so với các thư mục ban đầu của tệp. Để viết lại đường dẫn tương đối, postcss-url Plugin sẽ được sử dụng và cấu hình bây giờ trông như thế này:

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