Javascript 苗条的CSS文件不是'；运行时不生成
我正在遵循这一点，试图创建一个苗条的前端 我没有得到任何错误，但当我运行Javascript 苗条的CSS文件不是'；运行时不生成,javascript,html,css,svelte,rollupjs,Javascript,Html,Css,Svelte,Rollupjs,我正在遵循这一点，试图创建一个苗条的前端 我没有得到任何错误，但当我运行npm run dev时，我得到： 我应该看到在公用文件夹中创建的新extra.css文件。因此显示的页面没有任何CSS，只是简单的li项，而没有具体化CSS属性 我的文件： rollup.config.js import svelte from 'rollup-plugin-svelte'; import resolve from '@rollup/plugin-node-resolve'; import commonj
npm run devrollup.config.jsimport svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('public/build/bundle.css');
}
}),
css({ output: 'public\extra.css'}),
...
...
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='extra.css'>
<link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>
Navbar.svelte<script>
import '..\node_modules\materialize-css\dist\css\materialize.min.css';
import '..\node_modules\materialize-css\dist\js\materialize.min.js';
import { Router, Route } from 'svelte-routing';
import Navbar from './layout/Navbar.svelte';
import Home from './pages/Home.svelte';
import About from './pages/About.svelte';
</script>
<style>
</style>
<Router>
<Navbar>
<div class="container">
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</div>
</Navbar>
</Router>
<script>
import { Link } from 'svelte-routing';
</script>
<nav>
<div class="nav-wrapper">
<Link to="/" class="brand-logo">svelte app</Link>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</div>
</nav>
从“苗条路由”导入{Link}；
苗条应用程序
我还发现了这篇文章，似乎在说这篇教程还可以，对人们有用，所以我很困惑。我有一个类似的设置，它对我有用。我只注意到我导入了
materialize.cssmaterialize.min.css节点/materialize css/dist/css/materialize.min.css也许这就是这个谜题的答案：你可以尝试导入一个不存在的css文件。我也遇到了同样的问题。可以通过使用Rollup的回调函数而不是更简单的文件名定义来修复此问题：
css({
输出：函数（样式、样式节点）{
log（'Writing bundled CSS'）；
fs.writeFileSync（'static/bundle.css'，styles）；
}
})
const fs=require（'fs'）；
css（{output:'public\extra.css'}），e'publicextra.css'//