web-dev-qa-db-ja.com

css autoprefixer with webpack

LESSとAutoprefixerを使用してwebpackを構成しようとしましたが、autoprefixerは機能しないようです。私のcss以下のファイルは自動プレフィックスされません。例：display: flex滞在display: flex

以下にwebpackの設定を配置しました：

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',
  }
};
webpackautoprefixerpostcss
16
wrick17

問題が見つかりました。愚かなことに、postcssブロックはwebpack configの直下にある必要があり、モジュールブロックに入れていました。私の悪い。

編集：これはそうあるべきだった方法です：

var autoprefixer = require('autoprefixer');

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

したがって、モジュールブロック内に配置する代わりに、上記のようにメインブロックの下に直接配置する必要がありました。

8
wrick17

Autoprefixer documentation で書かれているように、「AutoprefixerはBrowserslistを使用します」

Browserslist documentation に従って、browserslistをpackage.jsonに配置することをお勧めします。

したがって、webpackでautoprefixerを使用する別の方法を次に示します。

postcss-loaderとautoprefixerをインストールします：

npm i -D postcss-loader autoprefixer

webpack.config.js/-

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

postcss documentation に従って、postcss-loaderはcss-loaderおよびstyle-loaderの後に配置する必要があります、but beforesass|less|stylus-loaderなどの他のプリプロセッサローダー（使用する場合）。

package.json/-

"postcss": {
  "plugins": {
    "autoprefixer": {}
  }
},
"browserslist": [
  "last 2 version",
  "not dead",
  "iOS >= 9"
]

この方法では、postcss.config.jsファイルは必要ありません。

10
antoni

古いブラウザバージョンのwebpack構成でpostcssを設定する必要があります。

Autoprefixerのデフォルトは、最新の2バージョンのブラウザー、または少なくとも5％の市場シェアを持つブラウザーです。

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

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

最新の3つのバージョンのブラウザー、または少なくとも1％の市場シェアを持つブラウザーをサポートしているという。

3
Marcel Mandatory

Webpack 2.x.xで同様の問題が発生していましたが、構成でカスタムプロパティが許可されなくなりました。私はこの他のS.O投稿で解決策を見つけました： webpack 2.0でpostcssでauto prefixerを使用 。何らかの不明な理由で、このリンクが404につながる場合は、ここで最も関連性の高い回答をまとめます。

Webpack 2.xx導入webpack.LoaderOptionsPlugin（）必要なプラグインすべてのローダーオプションプラグインを定義します。同様に、autoprefixerはpostcss-loaderのプラグインです。だから、ここに行かなければなりません。新しい設定は次のようになります。

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

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

これでうまくいきましたが、Kreigが述べたように、LoaderOptionsPlugin（）は必要ありません。オプションをローダー宣言に直接渡すことができます：

const autoprefixer = require('autoprefixer');

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

ことは、私はWebpack 2.5.1で2番目を試しましたが、失敗しました。クレジットはPranesh RaviとKreigに与えられます。

1
theFreedomBanana