Title: How to bundle CSS from node_modules into style-index.css using @wp/scripts?
Last modified: July 25, 2025

---

# How to bundle CSS from node_modules into style-index.css using @wp/scripts?

 *  Resolved [The Worst Wordpress Developer Alive](https://wordpress.org/support/users/tonyng137/)
 * (@tonyng137)
 * [10 months, 1 week ago](https://wordpress.org/support/topic/how-to-bundle-css-from-node_modules-into-style-index-css-using-wp-scripts/)
 * Hi Gutenberg enthusiasts 👋,
 * I’m encountering a confusing behavior when importing third-party CSS into a custom
   block using `@wordpress/scripts`.
 * Let me clarify first:
    - `style.scss` gets output as `**style-index.css**` (which is enqueued on **
      both the front end and editor**).
    - `editor.scss` gets output as `**index.css**` (which is loaded **only in the
      editor**).
 * Now here’s the issue:
 * I imported a third-party CSS file (Leaflet) like this in `index.js`:
 * > [View post on imgur.com](https://imgur.com/a/sKhREDS)
 * But instead of being included in `style-index.css` (as I expected), it ends up
   in `index.css` — which is editor-only!
 * > [View post on imgur.com](https://imgur.com/nkFTyYd)
 * > [View post on imgur.com](https://imgur.com/HwAo8T9)
 * What am I doing wrong?
   Is there an **official or recommended way** to ensure 
   third-party CSS gets bundled into the **frontend-compatible `style.css`**?
 * I’d really appreciate any guidance or clarification on how WordPress expects 
   this to be handled.
   Thanks in advance for your help and insights!Cheers,The Worst
   WordPress Developer Alive
    -  This topic was modified 10 months, 1 week ago by [The Worst Wordpress Developer Alive](https://wordpress.org/support/users/tonyng137/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Sandeep Dahiya](https://wordpress.org/support/users/sandeepdahiya/)
 * (@sandeepdahiya)
 * [10 months ago](https://wordpress.org/support/topic/how-to-bundle-css-from-node_modules-into-style-index-css-using-wp-scripts/#post-18572111)
 * Hi [@tonyng137](https://wordpress.org/support/users/tonyng137/)
 * When you import both `./style.scss` and a third-party CSS file like `leaflet/
   dist/leaflet.css` inside your `index.js` (which is the editor script), they are
   treated as part of the editor-only bundle and compiled into `index.css`, not `
   style-index.css`, because any CSS imported from a JavaScript file is bundled 
   with the corresponding JS entry. To ensure that third-party styles like Leaflet’s
   CSS are included in `style-index.css`—which is loaded on both the frontend and
   editor—you should import them directly inside `style.scss`, or alternatively,
   set up a dedicated frontend JS entry file (e.g., `frontend.js`) and import both`
   style.scss` and the third-party CSS there.
   Checkout this [https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/)
   for more details.
 * Regards
 *  Thread Starter [The Worst Wordpress Developer Alive](https://wordpress.org/support/users/tonyng137/)
 * (@tonyng137)
 * [10 months ago](https://wordpress.org/support/topic/how-to-bundle-css-from-node_modules-into-style-index-css-using-wp-scripts/#post-18572225)
 * [@sandeepdahiya](https://wordpress.org/support/users/sandeepdahiya/) 
   Hi again:-),
   I used the `@wordpress/create-block` tool to scaffold the initial files. By default:
    - `style.scss` is already imported in `index.js`
    - `editor.scss` is already imported in `editor.js`
 * As shown in my screenshots, **those files are correctly imported by default.**
   
   The `@wordpress/scripts` (included by `@wordpress/create-block`) build process
   then compiles:
    - `style.scss` (from `index.js`) → into **`style-index.css`** (frontend and 
      editor)
    - `editor.scss` (from `editor.js`) → into **`index.css`** (editor only)
 * 
   So logically, if you import** any CSS/SCSS** files into `editor.js`, they get
   compiled into `index.css` **(the editor-only file**) — and they do, I tested 
   it!Therefore, importing a CSS/SCSS file into `index.js` should compile it into`
   style-index.css`, right?But that’s not what happens — it still ends up in `index.
   css`, **the editor-only file**. 🤯**Long story short**. I tried your first suggestion
   and imported Leaflet into `style.scss`, but the result was the same: the Leaflet
   CSS still ended up in `index.css` (**editor-only file**).
 * Also, I’m not sure importing third-party S/CSS directly into `style.scss` or `
   editor.scss` is the right approach — especially since the comment in `index.js`
   says:
 * > “Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.”
 * Your **second suggestion** worked better. I created a new `frontend.js` and imported
   Leaflet there. It generated a new CSS bundle (`frontend.css`) with Leaflet styles
   inside. Then I just adjusted the path in `block.json` to reference it, like:
   `"
   style": "file:./frontend.css"`
 * That works fine — so I’ll stick with that approach for now. But to be honest,
   it still **feels a bit hacky or unintuitive** 😅
 * Thanks again for the support — really appreciate it!
   See you around 😄

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How to bundle CSS from node_modules into style-index.css using @wp/scripts?’
is closed to new replies.

## Tags

 * [gutenberg](https://wordpress.org/support/topic-tag/gutenberg/)
 * [Gutenberg blocks](https://wordpress.org/support/topic-tag/gutenberg-blocks/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 2 participants
 * Last reply from: [The Worst Wordpress Developer Alive](https://wordpress.org/support/users/tonyng137/)
 * Last activity: [10 months ago](https://wordpress.org/support/topic/how-to-bundle-css-from-node_modules-into-style-index-css-using-wp-scripts/#post-18572225)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics