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

[jesperordrup]

I created a new svelte project and ensured that it worked.
I followed your instructions to install bulma and svelma.

Im running this on my Windows 10

npm install --save bulma svelma

I then ran the

npm run dev

And the result is that it breaks the rollup

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

Full example:

C:\Code\test\my-svelte-project>npm run dev

> svelte-app@1.0.0 dev C:\Code\test\my-svelte-project
> run-p start:dev autobuild


> svelte-app@1.0.0 start:dev C:\Code\test\my-svelte-project
> sirv public --single --dev


> svelte-app@1.0.0 autobuild C:\Code\test\my-svelte-project
> rollup -c -w

  Your application is ready~! �

  - Local:      http://localhost:5000

────────────────── LOGS ──────────────────

rollup v1.15.6
bundles src/main.js → public\bundle.js...
[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
node_modules\bulma\css\bulma.css (2:0)
1: /*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */
2: @-webkit-keyframes spinAround {
   ^
3:   from {
4:     -webkit-transform: rotate(0deg);
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
    at error (C:\Code\test\my-svelte-project\node_modules\rollup\dist\rollup.js:9365:30)
    at Module.error (C:\Code\test\my-svelte-project\node_modules\rollup\dist\rollup.js:13272:9)
    at tryParse (C:\Code\test\my-svelte-project\node_modules\rollup\dist\rollup.js:13187:16)
    at Module.setSource (C:\Code\test\my-svelte-project\node_modules\rollup\dist\rollup.js:13503:33)
    at Promise.resolve.catch.then.then.then (C:\Code\test\my-svelte-project\node_modules\rollup\dist\rollup.js:16273:20)

1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! svelte-app@1.0.0 autobuild: `rollup -c -w`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the svelte-app@1.0.0 autobuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\UMAKERS\AppData\Roaming\npm-cache\_logs\2019-06-21T11_08_05_039Z-debug.log
ERROR: "autobuild" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! svelte-app@1.0.0 dev: `run-p start:dev autobuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the svelte-app@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[jesperordrup]

Problem appears after inserting into component

import 'bulma/css/bulma.css'

[c0bra]

Yea you need a plugin to import CSS files. https://github.com/HenrikJoreteg/rollup-plugin-css will do this

• I'll update the docs; sorry for that!

[jesperordrup]

Cool, Thanks @c0bra ! Will look forward to see how you use that (still cant)

[c0bra]

@jesperordrup I've updated the docs to show how to do this. Let me know if it doesn't work for you!

[jesperordrup]

@c0bra Thank you. it works now.