javascript - 运行时不生成苗条的 CSS 文件

问题描述

我正在按照本教程尝试创建一个苗条的前端。

我没有收到任何错误，但是当我运行时，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 上找到了这个问题/答案，似乎说该教程还可以并且为人们工作，所以我很困惑。

标签： javascripthtmlcsssvelterollupjs

在按照教程进行操作时，我遇到了同样的问题。打了一会儿我的头后，我意识到public/build它正在创建这个目录public/build/extra.css，所以首先看看你的文件结构是否与我的相似（下图）

最初的文件结构

然后我所做的是在中rollup.config.js，我将输出public/build/extra.css从 extra.css

...

    svelte({
        compilerOptions: {
            // 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');
  }
        }
    }),
    // we'll extract any component CSS out into
    // a separate file - better for performance
    css({ output: 'extra.css' }),
...

我希望这也能解决你的问题。

javascript - 运行时不生成苗条的 CSS 文件

问题描述

解决方案

推荐阅读