How to make the content of the "@import"s to be bundled in the final .css?

[electrotype]

With:

npm i animate.css

A src/test.scss file:

@import "animate.css";

.someTest {
  color: lime;
}

A src/test.ts file that references the scss:

import "./test.scss";
export const dummy = "dummy";

My rollup.config.mjs file:

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import scss from "rollup-plugin-scss";

export default {
  input: "./src/test.ts",
  output: {
    format: "es",
    file: "./public/bundles/app.bundle.js"
  },
  plugins: [
    resolve({ browser: true }),
    commonjs(),
    typescript({
      sourceMap: true
    }),
    scss({
      sourceMap: true,
      include: ["./src/test.scss"]
    })
  ]
};

This .css file is generated when running rollup -c:

@import "animate.css";
.someTest {
  color: lime;
}

/*# sourceMappingURL=output.css.map */

It doesn't bundle the "animate.css" content! When running the resulting files in a browser I get an error that the file "animate.css" is not found...

I did try another plugin " rollup-plugin-sass" and it bundled the @import properly (but has other issues). I also did try with Webpack and "sass-loader" and the content of the @import was also bundled in the resulting .css file.

What am I missing in order for the @import to be bundled?

[electrotype]

Ha! I found it! It's not so trivial, maybe the documentation should talk about this?

The @import directives need to be replaced with @use. Also, you can't import an external package from "node_modules" as a module. You need to use a relative path to the ".css" distribution file!

So this worked for me:

src/test.scss:

@use "./node_modules/animate.css/animate.css";

.someTest {
  color: lime;
}

Hope it helps someone, one day.