Файл svelte CSS не генерируется при запуске - PullRequest
Новая
       89

Файл svelte CSS не генерируется при запуске

0 голосов
/ 14 февраля 2020

Я следую этому учебнику , пытаясь создать интерфейс svelte.

Я не получаю никаких ошибок, но когда я запускаю npm run dev, я получаю:

run output

, который я должен увидеть новый дополнительный. css файл, созданный в папке publi c. и поэтому страница отображается без каких-либо 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, который, кажется, говорит, что учебник в порядке и работает для людей, поэтому я в замешательстве.

1 Ответ

0 голосов
/ 19 февраля 2020

У меня есть похожая настройка, и она работает для меня. Я только заметил, что я импортирую materialize.css вместо materialize.min.css и у меня нет matierialize.min.css в моей папке node_modules/materialize-css/dist/css/.

Возможно, это решение этой загадки: вы можете попробовать импортировать не существующий css файл.

...