css autoprefixer avec webpack

J'ai essayé de configurer webpack avec MOINS et Autoprefixer, mais autoprefixer ne semble pas fonctionner. Mon css ou moins de fichiers ne sont pas autoprefixed. Exemple:
display: flex reste display: flex

J'ai mis mon webpack config ci-dessous:

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

OriginalL'auteur wrick17 | 2016-06-24

5

Donc trouvé le problème. Je suis bête, la postcss bloc doit être directement sous le webpack de config, je l'avais mis dans les modules de bloc. Mon Mauvais.

EDIT: c'est comment il devrait être:
```
var autoprefixer = require('autoprefixer');

module.exports = {
    ...
    postcss: function () {
        return [autoprefixer];
    }
    ...
};
```
Ainsi, au lieu de le mettre à l'intérieur de l'modules de bloc, j'ai dû le mettre directement sous le bloc principal, comme indiqué ci-dessus.

OriginalL'auteur wrick17
3

Vous aurez besoin de mettre en place postcss dans votre webpack config pour les anciennes versions de navigateur.

Par défaut pour autoprefixer est 2 dernières versions des navigateurs ou des navigateurs qui ont au moins 5% de part de marché.

https://github.com/postcss/autoprefixer#browsers
```
  postcss: [
    autoprefixer({
      browsers: ['last 3 versions', '> 1%']
    })
  ],
```
Il est dit que vous prenez en charge les 3 dernières versions des navigateurs ou des navigateurs qui ont au moins 1% de part de marché.

Pouvez-vous fournir un résultat de webpack de commande.
ce n'est pas thorwing toutes les erreurs Hash: d630b9d8e940465f3b07 Version: webpack 1.13.1 Time: 1772ms Asset Size Chunks Chunk Names bundle.js 708 kB 0 [emitted] bundle bundle.js.map 816 kB 0 [emitted] bundle + 171 hidden modules
Je pense que c'est important de dire que la webpack 2 ne permet plus de propriétés personnalisées dans la configuration.

OriginalL'auteur Marcel Mandatory
3

Comme écrit dans Autoprefixer documentation, "Autoprefixer utilise Browserslist"

Que par la Browserslist documentation, il est recommandé de placer le browserslist dans package.json.

Voici donc une autre façon de utilisation autoprefixer avec webpack:

installer postcss-chargeur et 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'] 
    },
    ...
  ]
}
```
Comme par postcss documentation, le postcss-loader doit être placé après css-loader et style-loader, mais avant autres préprocesseur chargeurs comme l'e.g sass|less|stylus-loader, si vous en utilisez un.

package.json
```
"postcss": {
  "plugins": {
    "autoprefixer": {}
  }
},
"browserslist": [
  "last 2 version",
  "not dead",
  "iOS >= 9"
]
```
De cette façon, vous n'avez pas besoin d'un postcss.config.js fichier.

ressemble vous avez besoin d'un autre paquet pour ne pas utiliser un postcss.config.js fichier comme ça: github.com/postcss/postcss-loader/issues/...

OriginalL'auteur antoni
1

J'ai eu un problème similaire avec Webpack 2.x.x et des propriétés personnalisées ne sont plus autorisés dans la configuration. J'ai trouvé une solution sur ce que d'autres S. O post: L'utilisation de l'auto prefixer avec postcss dans webpack 2.0. Dans le cas où pour une raison inconnue, ce lien pourrait conduire à une erreur 404 je compile les réponses les plus pertinentes ici:

Webpack 2.x.x introduit webpack.LoaderOptionsPlugin() plug-in où vous avez besoin de définir toutes les option de chargeur de plugins. Comme, autoprefixer est un plugin pour postcss-loader. Donc, il faut aller ici.
Nouvelle config devrait ressembler à ceci:
```
module: {
  rules: [
    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'sass-loader', 
      'postcss-loader']
    }
  ]
},

plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        autoprefixer(),
      ]
    }
  })
],
```
Cela a fonctionné pour moi, mais comme mentionné par Kreig il n'est pas nécessaire pour LoaderOptionsPlugin(). Vous pouvez maintenant passer des options directement sur le chargeur de déclaration:
```
const autoprefixer = require('autoprefixer');

let settings = {
/*...*/
  module: {
    rules: [{
      test: /\.css$/,
        use: [
          /*...other loaders...*/
          {
            loader: 'postcss-loader',
              options: {
                plugins: function () {
                  return [autoprefixer]
                }
              }
          }
          /*...other loaders...*/
       ]
    }]
  }         
}
/*...*/
```
C'est que j'ai essayé le 2ème avec Webpack 2.5.1, mais il a échoué. Crédits va à Pranesh Ravi et Kreig.

OriginalL'auteur theFreedomBanana

Vous devez vous connecter pour publier un commentaire.