CODEWITHSUNDEEP
semantic-uisvelte
Allan Oloo
Allan Oloo

Reputation: 21

Svelte app returning "unexpected character @ " error when running project

I added a semantic-ui-css-only npm module in a svelte app project. Imported the module import "../node_modules/semantic-ui-css/semantic.css"; in main.js file. When I run npm run dev I get this error Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript) Not sure what the solution is. My hypothesis is the @ characters in the CSS causing issues no.

Upvotes: 2

Views: 3119

Answers (1)

luisbello30
luisbello30

Reputation: 11

Semantic development is dead but you can replace it with Fomantic

read this issue Is Semantic UI development dead ? and this The future of Fomantic as v3.0

After talking about this, how about this rollup plugin ?

https://www.npmjs.com/package/rollup-plugin-css-only

main.js

import App from './App.svelte';
import 'fomantic-ui-css/semantic.min.css';

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});

export default app;

rollup.config.js


...
import css from 'rollup-plugin-css-only';
...

plugins: [
    svelte({
        dev: !production,
        css: css => {
            css.write('public/build/bundle.css');
        }
    }),
    css({ output: './public/build/base.css' }),
    ...
    ...
]

index.html

    <link rel='stylesheet' href='/build/base.css'>
    <link rel='stylesheet' href='/build/bundle.css'>

Upvotes: 1

Related Questions