I am trying to create a library using EsBuild. I am using the keen slider in my library and I am importing keen-slider/keen-slider.min.css in main ts file.

import "keen-slider/keen-slider.min.css"

but in the output css file, keen slider css is not present. instead "import "keen-slider/keen-slider.min.css"" line itself present in output js file.

Can anyone tell me how to import node module css in the bundle?

I am trying to create a library using EsBuild. I am using the keen slider in my library and I am importing keen-slider/keen-slider.min.css in main ts file.

import "keen-slider/keen-slider.min.css"

but in the output css file, keen slider css is not present. instead "import "keen-slider/keen-slider.min.css"" line itself present in output js file.

Can anyone tell me how to import node module css in the bundle?

• javascript
• css
• reactjs
• bundle
• esbuild

• Can you provide a code example or a link to the repository? – imhvost Commented May 13, 2023 at 20:53

3 Answers 3

Not the exact same CSS I was trying to load, but using the esbuild-sass-plugin worked for me. Don't let the name fool you, it will work perfectly fine with regular CSS files. I tried various other plugins that looked like they would work, but each failed.

const esbuild = require("esbuild");
const {sassPlugin} = require("esbuild-sass-plugin");

esbuild.build({
    entryPoints: ["app.jsx"],
    bundle: true,
    watch: true,
    outfile: "app.js",
    plugins: [
        sassPlugin({type: "style"}),
    ],
});

ESbuild does not support CSS imports. You can use esbuild-plugin-css-modules.

Step 1:

yarn add --dev esbuild-plugin-css-modules
or
npm install --save-dev esbuild-plugin-css-modules

Step 2: Change your build script

const { build } = require('esbuild');
const cssModulesPlugin = require('esbuild-plugin-css-modules');

build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [cssModulesPlugin()]
}).catch(() => process.exit(1));

Step 3: Import the css file.

import "./path/to/keen-slider.min.css";

in esbuld css docs

import from JavaScript You can also import CSS from JavaScript. When you do this, esbuild will gather all CSS files referenced from a given entry point and bundle it into a sibling CSS output file next to the JavaScript output file for that JavaScript entry point. So if esbuild generates app.js it would also generate app.css containing all CSS files referenced by app.js. Here's an example of importing a CSS file from JavaScript:

import './button.css'

export let Button = ({ text }) =>
  <div className="button">{text}</div>

this should work by default. But if you have an issue with this, you could use On-load callbacks. docs show the example for txt files. BUt if you work with css there will be quotes and '' will be conflicting. so we would have invalid javascript. so we need to escape `` from the data.

let exampleOnLoadPlugin = {
  name: 'example',
  setup(build) {
    // Load ".txt" files and return an array of words
    build.onLoad({ filter: /.css$/ }, async (args) => {
      const { data } = await axios.get(args.path);
      const escapedData = data
          .replace(/\n/g, "") // first replace will collapse css into one single line. new lines are removed
          .replace(/"/g, '\\"') // this will escape all ""
          .replace(/'/g, "\\'"); // this will escape all ''

      // you could inject the css to the document
      //  const contents = `
          const style = document.createElement('style');
          style.innerText = '${escapedData}';
          document.head.appendChild(style);
      //  `;
    })
    // or you may need to return like this
    return {
        contents: JSON.stringify(escapedData),
        loader: 'css',
  }
  },
}

you need to register this plugin

await esbuild.build({
  entryPoints: ['app.js'],
  bundle: true,
  outfile: 'out.js',
  plugins: [exampleOnLoadPlugin],
})