CSS autoprefixer с webpack

Я пытался настроить webpack с помощью LESS и Autoprefixer, но autoprefixer, похоже, не работает. Мои css или менее файлы не являются autoprefixed. Образец: 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',
  }
};
10
autoprefixer postcss webpack

4 ответов

Так нашел проблему. Глупый я, блок postcss должен быть непосредственно под конфигурацией webpack, я поместил его в блок модулей. моя ошибка.

EDIT: вот как это должно было быть:

var autoprefixer = require('autoprefixer');

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

поэтому вместо того, чтобы помещать его в блок модулей, я должен был поместить его непосредственно под основным блоком, как показано выше.

5

вам нужно будет настроить postcss в конфигурации webpack для более старых версий браузера.

по умолчанию для autoprefixer последние 2 версии браузеров или браузеров, которые имеют не менее 5% доли рынка.

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

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

Он говорит, что вы поддерживаете последние 3 версии браузеров или браузеров, которые имеют по крайней мере 1% доли рынка.

2

у меня была аналогичная проблема с Webpack 2.х.х и пользовательские свойства больше не разрешены в конфигурации. Я нашел решение на этом другом посте S. O:использование автоматического префикса с postcss в webpack 2.0. В случае, если по какой-то неизвестной причине эта ссылка ведет к 404 я скомпилировать наиболее релевантные ответы здесь:

Webpack 2.х.х ввел 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(),
      ]
    }
  })
],

это сработало для меня, но, как упоминал Крейг, нет необходимости в LoaderOptionsPlugin(). Теперь вы можете передать параметры непосредственно в объявление загрузчика:

const autoprefixer = require('autoprefixer');

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

дело в том, что я пробовал 2nd с Webpack 2.5.1, но это не удалось. Кредиты идут Пранешу Рави и Крейгу.

0

как написано в документация Autoprefixer, "Autoprefixer использует Browserslist"

на документация Browserslist, рекомендуется разместить browserslist в package.json.

так вот еще один способ используйте autoprefixer с webpack:

установите postcss-загрузчик и 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, the postcss-loader должен быть помещен после css-loader и style-loader, но до другие загрузчики препроцессоров, такие как e.g sass|less|stylus-loader, если вы используете какой-либо.

package.json

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

таким образом, вам не нужно .

0