Flip "style-loader"/"css-loader" order in @wordpress/scripts webpack example

[johnwatkins0]

Description

The "Extending the webpack config" section in the @wordpress/scripts README had exactly the snippet I needed, except css-loader and style-loader needed to switched. When css-loader comes first, I get this error when running wp-scripts build:

ERROR in ./node_modules/react-character-map/dist/component/style.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) Unknown word

When style-loader is placed first, it works as expected.

How has this been tested?

Verified in my local environment.

Types of changes

Small README-only change.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[gziolo]

Good catch, the changes you proposed align with what we use with Storybook:

gutenberg/storybook/webpack.config.js

Lines 13 to 28 in 78de49e

	use: [
	'style-loader',
	'css-loader',
	/**
	* Configuring PostCSS with Webpack
	* https://github.com/postcss/postcss-loader#plugins
	*/
	{
	loader: 'postcss-loader',
	options: {
	ident: 'postcss',
	plugins: () => postCssConfigPlugins,
	},
	},
	'sass-loader',
	],

Thank you for opening this PR 🙇