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

【问题标题】：Svelte app returning "unexpected character @ " error when running projectSvelte 应用程序在运行项目时返回“意外字符@”错误
【发布时间】：2020-05-31 07:25:50
【问题描述】：

我在一个苗条的应用项目中添加了一个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 中的 @ 字符不会引起问题。

【问题讨论】：

是的，如果没有特定的插件来转换它，你不能在 JS fille 中导入 CSS。你的打包工具是什么，Rollup？网页包？

标签： semantic-ui svelte

【解决方案1】：

语义开发已死，但您可以将其替换为 Fomantic

阅读本期Is Semantic UI development dead ? 还有这个The future of Fomantic as v3.0

说完这个rollup插件怎么样？

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

【讨论】：