CSS-файл svelte не создается при запуске

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

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


javascript html css svelte rollupjs
person Avishay Cohen    schedule 14.02.2020    source источник
comment
css({ output: 'public\extra.css'}), Я полагаю, это просто игнорирование e. Проверьте, записал ли он css в 'publicextra.css'; и используйте косую черту /   -  person Thomas    schedule 14.02.2020
comment
Привет, @Thomas, спасибо, но я попробовал оба способа. Я думал, что это проблема с указанием пути, потому что я работаю с Windows, но оба / и `` имеют одинаковый результат - после запуска в папке нет дополнительных файлов   -  person Avishay Cohen    schedule 14.02.2020

Ответы (2)


arrow_upward
0
arrow_downward

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

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

person Andreas Dolk    schedule 19.02.2020
comment
привет @andreas_D, спасибо за ответ, я проверил, и у меня есть как минифицированные файлы, так и обычные файлы css / js. Я попытался импортировать неминифицированные файлы и получил тот же результат. Я также подумал, что это может быть связано с кешированием в браузере, и убедился, что мой браузер (опера) не кеширует - person Avishay Cohen; 21.02.2020

arrow_upward
0
arrow_downward

Я застрял в той же проблеме. Это можно исправить, используя функцию обратного вызова Rollup вместо более простого определения имени файла:

css({
    output: function (styles, styleNodes) {
        console.log('Writing bundled CSS.');
        fs.writeFileSync('static/bundle.css', styles);
    }
})

Для этого необходимо заранее определить файловую систему:

const fs = require('fs');
person Gian Segato    schedule 10.03.2021