Wepback

[sidonaldson]

Has anyone used this with webpack and PostCSS?

You can use postcss.config.js to load variables and plugins and i've tried the following:

module.exports = {
	remove: false,
	plugins: [
		require('autoprefixer')({
			browsers: [
				'>1%',
				'last 2 versions',
				'ie >= 8'
			]
		}),
		require('pixrem')
	]
}

However it doesn't work. Any help is hugely appreciated.

[dotnetCarpenter]

You should take a look at https://github.com/postcss/postcss-loader

[sidonaldson]

@dotnetCarpenter please elaborate?

[dotnetCarpenter]

@sidonaldson Instead of using pixem directly with Webpack, use postcss-loader with pixrem as plugin. https://github.com/postcss/postcss-loader#plugins

[sidonaldson]

@dotnetCarpenter this is a postCSS plugin. Why and how would I use it directly with Webpack. Clearly you didn't read my question - of course I'm using postcss-loader.

[mooniitt]

{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// facebook/create-react-app#2677
ident: 'postcss',
plugins: () => [
require('pixrem')({rootValue: 16, replace: false, atrules: false, html: true, browsers: 'ie <= 8', unitPrecision: 3}),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},

my webpack config ,also it's did not work

[malleswar]

my webpack also not working

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ReferenceError: autoprefixer is not defined
at Object.plugins (D:\NodeJsWork\CTS\BurgerApp\webpack.config.js:54:17)
at Object.parseOptions (D:\NodeJsWork\CTS\BurgerApp\node_modules\postcss-loader\src\options.js:18:23)
at Promise.resolve.then (D:\NodeJsWork\CTS\BurgerApp\node_modules\postcss-loader\src\index.js:51:27)
at
@ ./src/index.css 2:14-140
@ ./src/index.js

[malleswar]

options: {
// Necessary for external CSS imports to work
// facebook/create-react-app#2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},