Heim >Web-Frontend >js-Tutorial >Ausführliche Erklärung zur Konfiguration des PostCSS-Loaders mit Webpack2.0

Ausführliche Erklärung zur Konfiguration des PostCSS-Loaders mit Webpack2.0

巴扎黑
巴扎黑Original
2017-08-18 10:15:411316Durchsuche

In diesem Artikel wird hauptsächlich die Methode zum Konfigurieren des Postcss-Loaders in Webpack 2.0 vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

In diesem Artikel erfahren Sie, wie Sie den Postcssloader mit webpack2.0 konfigurieren und mit allen teilen. Die Details lauten wie folgt:

Postcss-loader installieren


npm install --save-dev postcss-loader

Anschließend webpack.config.js konfigurieren


{
 test:/\.css$/,
 use:[
  'style-loader','css-loader?importLoaders=1','postcss-loader' 
 ] 
}

Eine Möglichkeit besteht darin, postcss.config.js zu konfigurieren


module.exports = {
  plugins: [
    require('autoprefixer')({ /* ...options */ })
  ]
}

Die zweite Methode ist die Verwendung von LoaderOptionsPlugin


module.exports = {
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: function(){
          return [
            require("autoprefixer")({
              browsers: ['ie>=8','>1% in CN']
            })
          ]
        }
      }
    })
  ]
}
in webpack.config.js

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Konfiguration des PostCSS-Loaders mit Webpack2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn