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

  • Resolved The Worst Wordpress Developer Alive

    (@tonyng137)


    10 months ago

    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

    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
    View post on imgur.com

    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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Sandeep Dahiya

    (@sandeepdahiya)

    10 months ago

    Hi @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.ww.wp.xz.cn/block-editor/reference-guides/block-api/block-metadata/ for more details.

    Regards

    Thread Starter The Worst Wordpress Developer Alive

    (@tonyng137)

    10 months ago

    @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.