Svelte：无法导入未使用的 CSS 清除

Question

我未能成功删除未使用的 css 从外部 css 文件导入。

我尝试了很多组合都是徒劳的，每次我运行构建脚本时我都会得到一个巨大的 bundle.css.

这是我目前尝试过的所有内容的列表：

正在从 App.svelte <script>
正在从 App.svelte <style> 导入文件（使用 postcss-import）
直接从main.js
使用postcss-purgecss along with rollup-plugin-postcss instead of passing by svelte-preprocess

我很确定我做错了什么，但老实说我不知道是什么。

如果有人知道如何解决这个问题，我很乐意听到一些反馈。

简单的回购示例：https://github.com/mgrisole/svelte-playground

Answer 1

您需要按照以下步骤操作：

在 rollup.config.js 中导入 rollup-plugin-postcss：

import postcss from 'rollup-plugin-postcss';

将相关部分（rollup.config.js 的第 41-56 行）替换为：

svelte({
  preprocess: sveltePreprocess({ postcss: true }),
  compilerOptions: {
    dev: !production,
    css: css => { css.write('bundle.css') },
  },
  ...(production && { emitCss: false }),
}),
production
  ? postcss({ extract: true, minimize: true })
  : css({ output: 'bundle.css' }),

在 postcss.config.js 中配置 purgecss:

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./**/**/*.html', './**/**/*.svelte'],
  whitelistPatterns: [/svelte-/],
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

const isProduction = !process.env.ROLLUP_WATCH && !process.env.LIVERELOAD

module.exports = {
  plugins: [
    ...(isProduction ? [purgecss] : [])
  ]
};

Svelte：无法导入未使用的 CSS 清除

Svelte: Unable to get imported unused CSS purged

svelte

rollup-plugin-postcss