css autoprefixer với webpack

Question

Tôi đã cố định cấu hình webpack với LESS và Autoprefixer, nhưng autoprefixer dường như không hoạt động. Tệp css hoặc ít hơn của tôi không được tự động sửa. Ví dụ: display: flex trú display: flex

Tôi đã đặt cấu hình webpack của tôi dưới đây:

var autoprefixer = require('autoprefixer'); 

module.exports = { 
    entry: { 
    bundle: "./index.jsx" 
    }, 
    output: { 
    path: __dirname, 
    filename: "[name].js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx$/, 
     exclude: /(node_modules|bower_components)/, 
     loaders: ['react-hot', 'babel-loader'] 
     }, 
     { 
     test: /\.less$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader") 
     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader") 
     } 

    ], 
    postcss: function() { 
     return [autoprefixer]; 
    } 
    }, 
    plugins: [ 
    new webpack.BannerPlugin(banner), 
    new ExtractTextPlugin("style.css") 
    ], 
    devtool: 'source-map', 
    devServer: { 
    stats: 'warnings-only', 
    } 
}; 

Answer 1

Vì vậy, đã tìm thấy sự cố. Silly tôi, khối postcss cần phải được trực tiếp dưới cấu hình webpack, tôi đã đặt nó trong khối mô-đun. Lỗi của tôi.

EDIT: đây là cách nó cần phải có được:

var autoprefixer = require('autoprefixer'); 

module.exports = { 
    ... 
    postcss: function() { 
     return [autoprefixer]; 
    } 
    ... 
}; 

Vì vậy, thay vì đặt nó bên trong khối mô-đun, tôi đã phải đặt nó trực thuộc khối chính như trình bày ở trên.

Answer 2

Bạn sẽ cần phải thiết lập postcss trong cấu hình webpack của bạn cho phiên bản trình duyệt cũ.

Mặc định cho autoprefixer là 2 phiên bản trình duyệt hoặc trình duyệt có ít nhất 5% thị phần.

https://github.com/postcss/autoprefixer#browsers

postcss: [ 
    autoprefixer({ 
     browsers: ['last 3 versions', '> 1%'] 
    }) 
    ], 

Nó nói rằng bạn đang hỗ trợ 3 phiên bản cuối cùng của trình duyệt hoặc các trình duyệt đó có ít nhất 1% thị phần.

Answer 3

Tôi gặp sự cố tương tự với Webpack 2.x.x và thuộc tính tùy chỉnh không còn được cho phép trong cấu hình nữa. Tôi đã tìm thấy giải pháp cho bài đăng S.O khác này: Using auto prefixer with postcss in webpack 2.0. Trong trường hợp vì một lý do chưa biết liên kết này sẽ dẫn đến một 404 Tôi biên dịch các câu trả lời phù hợp nhất ở đây:

Webpack 2.xx giới thiệu webpack.LoaderOptionsPlugin() Plugin khi bạn cần phải xác định tất cả các plugin tùy chọn bộ nạp . Giống như, autoprefixer là một plugin cho postcss-loader. Vì vậy, nó phải đi đây. mới cấu hình sẽ trông như thế này:

module: { 
    rules: [ 
    { 
     test: /\.scss$/, 
     loaders: ['style-loader', 'css-loader', 'sass-loader', 
     'postcss-loader'] 
    } 
    ] 
}, 

plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
    options: { 
     postcss: [ 
     autoprefixer(), 
     ] 
    } 
    }) 
], 

này làm việc cho tôi, nhưng như đã đề cập bởi Kreig không có nhu cầu cho LoaderOptionsPlugin(). Bây giờ, bạn có thể chuyển các tùy chọn trực tiếp đến khai báo bộ nạp:

const autoprefixer = require('autoprefixer'); 

let settings = { 
/*...*/ 
    module: { 
    rules: [{ 
     test: /\.css$/, 
     use: [ 
      /*...other loaders...*/ 
      { 
      loader: 'postcss-loader', 
       options: { 
       plugins: function() { 
        return [autoprefixer] 
       } 
       } 
      } 
      /*...other loaders...*/ 
     ] 
    }] 
    }   
} 
/*...*/ 

Thing là tôi đã thử lần thứ 2 với Webpack 2.5.1 nhưng không thành công. Tín dụng đi đến Pranesh Ravi và Kreig.