PostCSS Plugin, um, wenn sie mit webpack

Question

mit Ich möchte die folgenden postCSS Plugins verwenden:

1. postcssimport (https://github.com/postcss/postcss-import)
2. postcssnested (https://github.com/postcss/postcss-nested)
3. postcsssimplevars (https://github.com/postcss/postcss-simple-vars)
4. postcssmixins (https://github.com/postcss/postcss-mixins)
5. Autoprefixer (https://github.com/postcss/autoprefixer)
6. verloren (https://github.com/peterramsing/lost)
7. postcssflexibility (https://github.com/7rulnik/postcss-flexibility)

Aber ich bin der Bestellung nicht sicher, in dem ich sie innerhalb

postcss: function() { 
    return [postcssimport, postcssnested, ...]; 
} 

Jede Hilfe setzen sollte?

Answer 1

Hier ist ein Beispiel aus meinem Projekt, das ich gerade arbeite:

webpackConfig.postcss =() => { 
    return [ 
    atImport({ 
     addDependencyTo: webpack 
    }), 
    webpackPostcssTools.prependTildesToImports, 
    customProperties({ 
     variables: map.vars 
    }), 
    customMedia({ 
     extensions: map.media 
    }), 
    customSelectors({ 
     extensions: map.selector 
    }), 
    normalize, 
    mixin, 
    cssnext, 
    rucksack, 
    sorting, 
    short 
    ] 
} 

Sie immer den Import zuerst haben sollte, dann ist die webpack postcss Tools, nachdem sie mit den Optionen. Dann nichts weiter für Ihre Post-Add-ons.

Fühlen Sie sich frei, das Projekt ich tue hier zur Kasse: https://github.com/codetony25/react-starter-boilerplate

Oh, und ich möchte direkt beantworten Ihre Frage auch. In deinem Fall sollte es zuerst postcssimport gehen. Dann scheint der Rest Add-ons zu sein, so dass die Reihenfolge keine Rolle spielt.

Answer 2

in postcss.config.js Datei mit webpack2

var path = require('path') 

module.exports = { 
    plugins: [ 
     require('postcss-nested'), 
     require('postcss-import')({ 
      path: path.join(__dirname, '../../'), 
     }), 
     require('postcss-cssnext')({ 
      browsers: [ 
       'last 2 versions', 
       'iOS >= 7', 
       'Android >= 4.0', 
      ], 
     }), 
     require('postcss-flex-fallback')(), 
     require('postcss-px2rem')({ 
      remUnit: 75, 
     }) 
    ], 
} 

in webpack.base.cinf.js Datei

const vueLoaderConfig = require('./vue-loader.conf') 

module: { 
    rules: [ 
    ... 
    { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: vueLoaderConfig 
    }, 
    ... 
}