Level 3
postCss: [
You need an upper C in postCss
Cheers
Currently we have a rather complicated gulp task for managing all of our requirements for our css.
we then apply several postcss plugins to our code.
We have to maintain a minified and an un-minified version of our css due to customization capabilities.
All of this works in our current gulp build process.
This is what the mix file looks like.
const mix = require('laravel-mix');
const scss = require('postcss-scss');
// Config
const sortOrder = require('./.postcss-sorting.json');
const AUTOPREFIXER_BROWSERS = [
'ie >= 11',
'edge >= 12',
'ff >= 38',
'chrome >= 35',
'safari >= 8',
'opera >= 35',
'ios >= 8'
];
// CSS
mix.sass('src/scss/core.scss', 'dist/assets/css', {
indentType: 'tab',
indentWidth: 1,
outputStyle: 'expanded',
precision: 10,
onError: console.error.bind(console, 'Sass error:')
})
.options({
processCssUrls: false,
autoprefixer: {
options: {
browsers: AUTOPREFIXER_BROWSERS
}
},
postcss: [
require('postcss-sorting')(sortOrder),
require('postcss-pxtorem')({
rootValue: 16,
unitPrecision: 7,
propWhiteList: [
'font',
'font-size',
'margin',
'margin-left',
'margin-right',
'margin-top',
'margin-bottom',
'padding',
'padding-left',
'padding-right',
'padding-top',
'padding-bottom'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0
}),
require('stylefmt')({syntax: scss})
]
});
we are getting a result of the sass compilation however it does not appear to be performing any of our postcss plugins for some reason.
Please or to participate in this conversation.