svelte - Svelte:无法清除导入的未使用 CSS
问题描述
我尝试删除从外部 css 文件导入的未使用 css,但未成功。
我徒劳地尝试了很多组合,每次运行构建脚本时,我都会得到一个巨大的bundle.css。
这是迄今为止我尝试过的所有内容的列表:
- 从 App.svelte 导入文件
<script>
- 从 App.svelte 导入文件
<style>
(使用postcss-import) - 直接从 main.js 导入文件
- 使用postcss-purgecss和rollup-plugin-postcss而不是通过svelte-preprocess
我很确定我做错了什么,但老实说我不知道是什么。
如果有人知道如何解决这个问题,我很想听听一些反馈。
解决方案
您需要按照以下步骤操作:
- 导入:
rollup-plugin-postcss
_rollup.config.js
import postcss from 'rollup-plugin-postcss';
- 将相关部分(您的第 41-56 行
rollup.config.js
)替换为:
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' }),
- 配置 purgecss
postcss.config.js
:
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] : [])
]
};
推荐阅读
- python - 在 python 中需要帮助删除 json 列表中的字典
- c# - 编辑用于生成方法的代码片段?
- vb.net - WinAppDriver - 无法在组合框中单击项目或选择项目
- c# - 使用 C#.NET 在 Windows 上修改注册表权限
- dart - 如何在文本中有一个小部件?
- wpf - 调度程序调用异步等待.net 4.6.1
- android - Android-app:切换到房间数据库后旧数据库仍然存在
- python - 用户输入然后显示特定的行数据
- c# - 为什么在尝试在另一个线程上运行异步方法时会收到警告?
- r - 如何使用 facet_grid() 为矩阵的每一列创建 ggplot