Rollup.js - 让PostCSS处理整个bundle.css，而不是来自rollup-plugin-svelte的单个文件。

Question

我已经尝试了几个指南和许多配置，但无法让我的rollup、postcss和svelte bundle过程完全正常工作。

现在，svelte插件从我的.svelte文件中提取css，并将其发送给posctcss插件，但它一次只提取一个文件，而不是整个捆绑。 这使得purgecss和nanocss postcss插件中的一些功能不能完全工作，因为它们需要整个bundle来做一些事情，比如删除重复的多余的未使用的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 rollup_start_dev from './rollup_start_dev'
import builtins from 'rollup-plugin-node-builtins'
import postcss from 'rollup-plugin-postcss'

const production = !process.env.ROLLUP_WATCH

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/bundle.js',
    },
    plugins: [
        svelte({
            dev: !production,
            emitCss: true,
        }),
        postcss({
            extract: true,
            sourceMap: true,
        }),
        builtins(),
        resolve({
            browser: true,
            dedupe: importee =>
                importee === 'svelte' || importee.startsWith('svelte/'),
        }),
        commonjs(),
        !production && rollup_start_dev,
        !production && livereload('public'),
        production && terser(),
    ],
    watch: {
        clearScreen: false,
    },
}

// postcss.config.js
const production = !process.env.ROLLUP_WATCH
const purgecss = require('@fullhuman/postcss-purgecss')


module.exports = {
    plugins: [
        require('postcss-import')(),
        require('tailwindcss'),
        require('autoprefixer'),
        production &&
            purgecss({
                content: ['./src/**/*.svelte', './src/**/*.html', './public/**/*.html'],
                css: ['./src/**/*.css'],
                whitelistPatterns: [/svelte-/],
                defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
            }),
        production &&
            require('cssnano')({
                preset: 'default',
            }),
    ],
}

我怎样才能让rollup将整个bundle.css传递给postcss，而不是一次只传递一个 "文件"？

Answer 1

不能确定，但当我比较你的设置和我的设置时，最突出的区别是我有。

css: css => {
                css.write('public/build/bundle.css');
            }

在svelte选项中，另外，我的整个svelte选项看起来像

我的整个svelte选项看起来是这样的。

svelte({
    preprocess: sveltePreprocess({ postcss: true }),
    dev: !production,
    css: css => {
        css.write('public/build/bundle.css');
    }
})

注意，我用的是 sveltePreprocess 这将使你 postcss 多余的，但我不认为这是造成你的问题。