Svelte应用程序在运行项目时返回“意外字符@”错误

Question

我在一个svelte应用项目中添加了一个semantic-ui-css-only npm模块。已导入main.js文件中的模块import "../node_modules/semantic-ui-css/semantic.css";。当我运行npm run dev时，我得到这样的错误：Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)不确定解决方案是什么。我的假设是CSS中的@字符导致了问题。

Answer 1

语义开发已经死了，但是你可以用Fomantic来代替它

阅读本期Is Semantic UI development dead ?和本期The future of Fomantic as v3.0

在讨论完这个之后，这个汇总插件怎么样？

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'>