Rollup.js -让PostCSS处理整个插件，而不是来自bundle.css -bundle.css-svelte的单个文件
我已经尝试了几个指南和许多配置，但无法让我的rollup、postcss和svelte bundle进程正常工作。
现在，svelte插件正在从我的.svelte文件中提取css，并将其发送到posctcss插件，但它是一次只处理一个文件，而不是整个包。这使得purgecss和nanocss postcss插件中的一些函数不能完全工作，因为它们需要整个包来做一些事情，比如删除重复/冗余/未使用的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，而不是一次传递一个“文件”？
回答 2
Stack Overflow用户
发布于 2020-07-19 01:06:09
我也有同样的问题，预处理是一个文件一个文件地进行，所以我不得不在每个文件中包含我所有的混入和变量，这绝对不是一个好的解决方案。
因此，对我来说，第一个解决方案是从sveltePreprocess中删除postcss，而不是发出css文件，并在css bundle上使用postcss，这是从svelte的css函数中获得的。
然后，您可以或者(1)直接在svelte的css函数中使用postcss，然后在dist目录中发出生成的css文件，或者(2)可以在CSS目录中发出该文件，并让postcss-cli监视该目录并捆绑所有内容。
解决方案1
// rollup.config.js
// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import postcss from 'postcss';
import postcssConfig from './postcss.config.js';
const postcssPlugins = postcssConfig({});
const postcssProcessor = postcss(postcssPlugins);
export default {
input: 'src/main.js',
output: {
file: 'public/bundle.js',
format: 'iife',
},
plugins: [
svelte({
emitCss: false,
css: async (css) => {
const result = await postcssProcessor.process(css.code);
css.code = result.css;
css.write('public/bundle.css');
},
}),
resolve(),
],
};还有我的postcss.config.js，它返回一个函数，该函数返回一个插件数组：
export default (options) => {
const plugins = [
require('postcss-preset-env')()
];
if (options.isProd) {
plugins.push(require('cssnano')({ autoprefixer: false }));
}
return plugins;
};解决方案2
// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
export default {
input: 'src/main.js',
output: {
file: 'public/bundle.js',
format: 'iife',
},
plugins: [
svelte({
emitCss: false,
css: async (css) => {
css.write('css/svelte-bundle.css');
},
}),
resolve(),
],
};// package.json
{
//...
"scripts": {
"dev": "npm-run-all --parallel js:watch css:watch",
"js:watch": "rollup -c -w",
"css:watch": "postcss css/app.css --dir dist/ --watch",
},
}/* css/app.css */
@import 'vars.css';
@import 'mixins.css';
/* all other code ... */
/* and svelte-bundle, which will trigger a bundling with postcss everytime it is emitted */
@import 'svelte-bundle.css';结论
总而言之，我不喜欢这个方法，举个例子，因为我不能使用嵌套，因为如果css无效，svelte会抛出错误。
我更喜欢在rollup-plugin-svelte之后使用rollup-plugin-postcss，并将emitCss设置为false，并且可以在svelte css函数中使用rollup的this.emitFile，因为一旦捆绑的文件发出，我们就应该能够处理它。
似乎有一些问题在讨论使用emitfile，让我们希望它会比https://github.com/sveltejs/rollup-plugin-svelte/issues/71更早发生。
Stack Overflow用户
发布于 2020-05-11 23:53:16
不能肯定，但当我比较你的设置和我的设置时，最显著的区别是我有：
css: css => {
css.write('public/build/bundle.css');
}在svelte选项中另外添加。
我的整个svelte选项看起来像这样：
svelte({
preprocess: sveltePreprocess({ postcss: true }),
dev: !production,
css: css => {
css.write('public/build/bundle.css');
}
})注意，我使用的是sveltePreprocess，这会使你的postcss变得多余，但我不认为这会导致你的问题。
https://stackoverflow.com/questions/59792844
复制相似问题
腾讯云开发者
