Блог

Я хотел бы извлечь стиль из <style> блока в компонентах svelte и включенные css файлы (например import 'datatables.net-bs4/css ) в определенный файл.

Я понимаю, что это задача rollup-plugin-postcss , но я не могу добиться, чтобы она работала.

 import svelte from 'rollup-plugin-svelte';
import { terser } from 'rollup-plugin-terser';
import scss from 'rollup-plugin-scss'
import livereload from 'rollup-plugin-livereload'
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import copy from 'rollup-plugin-copy'
import autoprefixer from 'autoprefixer'
import postcss from 'rollup-plugin-postcss'

const production = !process.env.ROLLUP_WATCH;

export default [{
      input: 'front/svelte/main.js',
      output: {
          sourcemap: true,
          format: 'iife',
          name: 'app',
          file: 'web/static/build/bundle.js'
     },
      plugins: [
        resolve({
            jsnext: true,
            main: true,
            browser: true,
        }),
        commonjs(),
        svelte({
            dev: !production,
            include: ['front/svelte/**', 'node_modules/svelte/**'],
        }),
        postcss({
            extract: true,
            minimize: true,
        }),
        !production amp;amp; livereload('web'),
        production amp;amp; terser()
      ],
    }
  }
];
 

Я понял, что опция извлечения будет генерировать web/static/build/bundle.css , но ничего не происходит.

Как я могу это решить?

По умолчанию шаблон svelte использует rollup-plugin-css-only плагин для выполнения того, что вы ищете.

 // we'll extract any component CSS out into
// a separate file - better for performance
css({ output: 'bundle.css' }),
 

Если возможно, может быть, стоит попробовать, чтобы убедиться, что базовая настройка работает, отладить по мере необходимости, а затем посмотреть, сможете ли вы вернуться к rollup-plugin-postcss .