首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Rollup.js -让PostCSS处理整个插件,而不是来自bundle.css -bundle.css-svelte的单个文件

Rollup.js -让PostCSS处理整个插件,而不是来自bundle.css -bundle.css-svelte的单个文件
EN

Stack Overflow用户
提问于 2020-01-18 02:14:08
回答 2查看 2.6K关注 0票数 1

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

现在,svelte插件正在从我的.svelte文件中提取css,并将其发送到posctcss插件,但它是一次只处理一个文件,而不是整个包。这使得purgecss和nanocss postcss插件中的一些函数不能完全工作,因为它们需要整个包来做一些事情,比如删除重复/冗余/未使用的css规则。

代码语言:javascript
运行
复制
// 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,
    },
}
代码语言:javascript
运行
复制
// 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,而不是一次传递一个“文件”?

EN

Stack Overflow用户

发布于 2020-05-11 23:53:16

不能肯定,但当我比较你的设置和我的设置时,最显著的区别是我有:

代码语言:javascript
运行
复制
css: css => {
                css.write('public/build/bundle.css');
            }

在svelte选项中另外添加。

我的整个svelte选项看起来像这样:

代码语言:javascript
运行
复制
svelte({
    preprocess: sveltePreprocess({ postcss: true }),
    dev: !production,
    css: css => {
        css.write('public/build/bundle.css');
    }
})

注意,我使用的是sveltePreprocess,这会使你的postcss变得多余,但我不认为这会导致你的问题。

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59792844

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档