diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index d5c15f8e12816d..2f3c5d8d86968b 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -9,6 +9,7 @@ - Add support for passing [node CLI options](https://nodejs.org/api/cli.html) to scripts ([#21631](https://github.com/WordPress/gutenberg/pull/21631)). - Add debugging support for `test-unit-js` script ([#21631](https://github.com/WordPress/gutenberg/pull/21631)). Tests can be debugged by any [inspector client](https://nodejs.org/en/docs/guides/debugging-getting-started/#inspector-clients) that supports the [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/) using the `--inspect-brk` option. - Add debugging support for `test-e2e` script ([#21861](https://github.com/WordPress/gutenberg/pull/21861)). Tests can be debugged by using the `--inspect-brk` option and a new `--puppeteer-devtools` option (or `PUPPETEER_DEVTOOLS="true"` environment variable). +- Add capability to import CSS, SASS or SCSS files from JavaScript to `build` and `start` scripts ([#21730](https://github.com/WordPress/gutenberg/pull/21730)). ### Bug fix diff --git a/packages/scripts/README.md b/packages/scripts/README.md index 6678acbe526f8a..62f7a95e179484 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -532,10 +532,11 @@ Should there be any situation where you want to provide your own webpack config, To extend the provided webpack config, or replace subsections within the provided webpack config, you can provide your own `webpack.config.js` file, `require` the provided `webpack.config.js` file, and use the [`spread` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to import all of or part of the provided configuration. -In the example below, a `webpack.config.js` file is added to the root folder extending the provided webpack config to include [`css-loader`](https://github.com/webpack-contrib/css-loader) and [`style-loader`](https://github.com/webpack-contrib/style-loader): +In the example below, a `webpack.config.js` file is added to the root folder extending the provided webpack config to include custom logic to parse module's source and convert it to a JavaScript object using [`toml`](https://www.npmjs.com/package/toml). It may be useful to import toml or other non-JSON files as JSON, without specific loaders: ```javascript -const defaultConfig = require("@wordpress/scripts/config/webpack.config"); +const toml = require( 'toml' ); +const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); module.exports = { ...defaultConfig, @@ -544,8 +545,11 @@ module.exports = { rules: [ ...defaultConfig.module.rules, { - test: /\.css$/, - use: [ 'style-loader', 'css-loader' ], + test: /.toml/, + type: 'json', + parser: { + parse: toml.parse + } } ] }