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。

Svelte：如何使用汇总在特定文件中提取 CSS？

1 个答案: