How to Bundle CSS from node_modules into style-index.css Using @wordpress/scripts

When you are building custom WordPress blocks or plugins, it can get tricky with managing your styles, especially if you’re utilizing external libraries that are pulled in through npm.

WordPress’s build system (powered by @wordpress/scripts) compiles JavaScript out-of-the-box, and it does a good job for most cases of CSS as well, however if you want to use CSS from node_modules, such as Bootstrap or Tailwind utilities or custom UI kits, inside your final style-index. css bundle?

Below is a very useful, gradual guide for how to do it right.

1. Understanding the Default Setup

When you scaffold a block using @wordpress/create-block, it automatically uses @wordpress/scripts under the hood.
The typical setup looks like this:
src/

├── index.js

├── editor.scss
├── style.scss
package.json


Running the build command:
npm run build
creates:
build/

├── index.js

├── style-index.css

By default, style-index.css only includes styles imported from your own SCSS files, not from third-party packages inside node_modules.

2. Import CSS from node_modules in Your SCSS

To include a third-party library’s CSS in your final bundle, simply import it directly inside your main SCSS file (style.scss).

Example:

@import "~bootstrap/dist/css/bootstrap.min.css";

@import "./custom.scss";

The ~ symbol tells Webpack (used internally by @wordpress/scripts) to look inside node_modules.

Once you build your project again, this CSS will be processed and added to your style-index.css automatically.

3. Import from JS (When Using Pure CSS Packages)

If your package doesn’t use SCSS, you can also import it directly from your main JS file:

import 'slick-carousel/slick/slick.css';

import './style.scss';

This ensures Webpack processes the external CSS and bundles it into the final style-index.css output.

4. Handling Build Errors (Common Issue)

Sometimes, importing from node_modules may throw an error like:

Can't resolve 'bootstrap/dist/css/bootstrap.min.css'

To fix this, ensure you’ve installed the library properly:

npm install bootstrap

Then, double-check the import path, not all packages keep their CSS in a dist/css/ directory.

5. Verify the Output

After running:

npm run build

Open your generated file:

build/style-index.css

You should now see both your custom styles and third-party CSS in the same compiled file. That is how you confirm your bundling worked correctly.

6. Why This Approach Matters

Bundling everything into style-index.css simplifies your WordPress enqueue process. You’ll only need to enqueue a single stylesheet for both your custom and external styles:

wp_enqueue_style(

'my-block-style',

plugins_url( 'build/style-index.css', __FILE__),

array(),

filemtime( plugin_dir_path( __FILE__ ) . 'build/style-index.css' )

);

This helps keep your project lightweight, organized, and easier to maintain, especially when scaling multiple custom blocks.

7. Pro Tip: Keep Performance in Mind

While it’s convenient to bundle everything, remember that loading large frameworks (like full Bootstrap) can increase file size. 

Only import what you need, for example, use Bootstrap’s partial SCSS imports instead of the entire library.

@import "~bootstrap/scss/buttons";

@import "~bootstrap/scss/forms";


This keeps your build efficient and performance-friendly.

Final Thoughts

The @wordpress/scripts node_modules CSS bundling is a smooth and lean approach to slim down your development process.

It makes sure your block styles sit at the core, reduces manual enqueues and allows you to tap into external libraries easily.

If you’re developing custom Gutenberg blocks or WordPress applications powered by modern tooling, this pattern is well worth learning in the long-term, it will save you a lot of time and keep your codebase more maintainable