webpack 2.2.1にオートプレフィクサーを追加する

Question

私はwebpack 2.2.1にオートプレフィクサーを追加しようとしています。 postcss-loader https://github.com/postcss/postcss-loaderがインストールされています。これは、webpackのpostcssを処理する方法のようです。

私は現在私の反応ファイルにインポートしているscssファイルを使用しています。 例： '../../styles/header.scss'からのインポートスタイル。 これは、webpackでsass-loaderを使用して処理されます。

セットアップでエラーが発生していませんが、私のファイルに自動プルーフ修正が行われていませんか？私はこれが、開発ではなく生産に追加される必要があると思いますか？

ここに私のdevの設定webpackの設定です。

const path = require('path') 
const webpack = require('webpack') 

const ROOT_DIR = path.resolve(__dirname, '../app') 

    module.exports = { 
     devtool: 'eval', 

     entry: [ 
     `${ROOT_DIR}/js/index`, 
     'webpack-hot-middleware/client' 
     ], 

     output: { 
     path: path.resolve(__dirname, '../public'), 
     filename: 'bundle.js', 
     publicPath: '/public/' 
     }, 

     plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoEmitOnErrorsPlugin(), 
     new webpack.DefinePlugin({ 
      "config.ASSET_URL": JSON.stringify(process.env.ASSETS_URL), 
      "config.GA_TRACKING_ID": JSON.stringify(process.env.GA_TRACKING_ID) 
     }) 
     ], 
     module: { 
     loaders: [ 
      { test: /\.js?$/, 
      loader: 'babel-loader', 
      include: path.join(__dirname, '../app'), 
      exclude: /node_modules/ 
      }, 
      { test: /\.scss?$/, 
      include: path.join(__dirname, '../app', 'styles'), 
      use: [ 
       'style-loader', 
       'css-loader', 
       { 
       loader: 'postcss-loader', 
       options: { plugins: [ 
        require('autoprefixer') 
       ] } 
       }, 
       { 
       loader: 'sass-loader', 
       options: { 
        data: "$assetPath: '" + process.env.ASSETS_URL + "';" 
       } 
       } 
      ] 
      }, 
      { 
      test: /\.(jpe?g|png|gif|svg)$/i, 
      include : path.join(__dirname, '../app', 'images'), 
      loader : 'file-loader?limit=30000&name=[name].[ext]' 
      }, 
      { 
      test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
      include : path.join(__dirname, '../app', 'fonts'), 
      loader: 'file-loader?name=fonts/[name].[ext]' 
      } 
     ] 
     } 
    } 

Answer 1

最近、私はいつか近似して対処する必要がありました。 /：あなたはこの回答httpsを参照してくださいそれ

//postcss.config.js 
module.exports = { 
    plugins: [ 
     require('autoprefixer') 
    ] 
} 

にし、あなたのWebPACKの設定

{ test: /\.scss?$/, 
    include: path.join(__dirname, '../app', 'styles'), 
    use: [ 
     {loader: "style-loader"}, 
     {loader: "css-loader"}, 
     {loader: "postcss-loader"}, 
     {loader: "sass-loader", 
     options: { 
      data: "$assetPath: '" + process.env.ASSETS_URL + "';" 
     } 
     } 
    ] 
    },