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

【问题标题】：Svelte: How to extract CSS in a specific file with rollup?Svelte：如何使用汇总提取特定文件中的 CSS？
【发布时间】：2021-05-13 23:55:03
【问题描述】：

我想从瘦组件中的<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，但什么都没有发生。

我该如何解决这个问题？

【问题讨论】：

标签： css svelte rollup postcss

【解决方案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。

【讨论】：