PostCSS плагин порядка при использовании с WebPack

Question

Я хочу использовать следующие postCSS плагины:

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. потерял (https://github.com/peterramsing/lost)
7. postcssflexibility (https://github.com/7rulnik/postcss-flexibility)

Но я уверен в том порядке, в котором я должен поместить их внутрь

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

Любая помощь?

Answer 1

Вот пример из моего проекта, который я сейчас работаю над:

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 
    ] 
} 

Вы всегда должны иметь импорт первый, то WebPack postcss инструменты после того, как с параметрами. Тогда что-нибудь после того, как вы добавите postcss.

Вы можете оформить проект я делаю здесь: https://github.com/codetony25/react-starter-boilerplate

О, и я хочу, чтобы прямо ответить на ваш вопрос тоже. В вашем случае он должен сначала отправиться в postcssimport. Тогда остальные, кажется, добавляются, так что порядок не имеет значения.

Answer 2

в postcss.config.js файл с 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, 
     }) 
    ], 
} 

в webpack.base.cinf.js файле

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

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