sveltejs / rollup-plugin-svelte

Compile Svelte components with Rollup
MIT License
505 stars 79 forks source link

An error when no css plugin used #164

Closed PaulMaly closed 3 years ago

PaulMaly commented 3 years ago

Hi all!

I've got a strange error when just remove rollup-plugin-css-only from the rollup pipeline of the standard svelte template:

plugins: [
  svelte({ ... }),
  // css({ ... }) <-- just comment this line
  ...
]
bundles src/main.js → public/build/bundle.js...
[!] Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
src/App.css (1:13)
1: main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}}
                ^
Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)

Can we still use svelte without obligatory moving CSS to a separate file or this way was declined?

Conduitry commented 3 years ago

You now need a CSS plugin to extract the CSS to an external file, but you can still use the emitCSS: false option to instead embed code to add the style tags inside the JS.

PaulMaly commented 3 years ago

I tried to use emitCSS: false option like this:

svelte({
  compilerOptions: {
    // enable run-time checks when not in production
    dev: !production,
  },
  emitCSS: false,
}),

But it still produce the same error on npm run build. What am I doing wrong?

UPDATE:

For further readers, the option actually named emitCss and works as @Conduitry said.