Svelte:如何使用rollup在特定文件中提取CSS？

Question

我想从svelte组件的<style>块中提取样式，并在特定文件中包含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 && livereload('web'),
        production && terser()
      ],
    }
  }
];

我知道extract选项会生成一个web/static/build/bundle.css，但什么也不会发生。

我怎么才能解决这个问题呢？

Answer 1

默认情况下，svelte template使用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。