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 // https://github.com/facebookincubator/create-react-app/issues/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 // https://github.com/facebookincubator/create-react-app/issues/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', }), ], }, },