[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

[sp0033212000]

I got this error when I rollup tailwind module.

My rollup config:

import postcss from "rollup-plugin-postcss";
import typescript from "rollup-plugin-typescript2";

/**
 * @type {import("rollup").RollupOptions}
 */
const config = {
  input: "./src/index.tsx",
  output: [
    { file: "./lib/esm/index.js", format: "esm" },
    { file: "./lib/cjs/index.js", format: "cjs" },
  ],
  plugins: [
    postcss({
      config: { path: "./postcss.config.js" },
      extensions: ["css"],
      minimize: true,
      inject: { insertAt: "top" },
    }),
    typescript({
      tsconfig: "tsconfig.json",
    }),
  ],
  external: ["react", "react-dom"],
};

export default config;

[caschbre]

I started to receive this error message as well. The odd thing is that I have several .svelte files importing css files... but only one is giving me this error so far.

Table.svelte (this works)

<script>
  import './tables.pcss';
</script>

Pager.svelte (this throws the error)

<script>
  import './pagers.pcss';
</script>

In both cases, the (taliwind) css files look like...

@layer components {
  .some-class {}
}