不能在运行时生成CSS文件

Question

我正在跟踪此tutorial，试图创建一个精巧的前端。

我没有收到任何错误，但是当我运行npm run dev时，我得到了：

我应该看到在公共文件夹中创建的新的extra.css文件。因此显示的页面没有任何CSS，只是普通的li项，而不是具有materialize-css属性。

我的文件：

rollup.config.js

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

App.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>

Navbar.svelte

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

而且我还在SO上找到了这个question/answer，似乎在说该教程还不错，可以为人们服务，所以我很困惑。

Answer 1

我有一个相似的设置，它对我有用。我只注意到我导入了materialize.css而不是materialize.min.css，并且我的matierialize.min.css文件夹中没有node_modules/materialize-css/dist/css/。

也许这就是解决这个难题的方法：您可以尝试导入不存在的CSS文件。

不能在运行时生成CSS文件

问题描述投票：0回答：1

1个回答

最新问题

不能在运行时生成CSS文件

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1