Nuxt2打包清除css 怎么yarn下载 使用purgeCSS
时间: 2023-09-05 13:08:43 浏览: 40
要使用 PurgeCSS 来清除 Nuxt2 打包后的 CSS,需要进行以下步骤:
1. 首先,安装 PurgeCSS 和 @nuxtjs/purgecss 依赖项:
```
yarn add purgecss @nuxtjs/purgecss --dev
```
2. 在 Nuxt2 项目的 nuxt.config.js 文件中,添加以下配置:
```
buildModules: [
'@nuxtjs/purgecss'
],
purgeCSS: {
mode: 'postcss',
enabled: (process.env.NODE_ENV === 'production')
},
```
这里使用了 @nuxtjs/purgecss 模块,添加了 mode 和 enabled 配置项。mode 设置为 postcss,使得 PurgeCSS 可以在 PostCSS 中运行。enabled 配置项则表示只有在生产环境时才会使用 PurgeCSS。
3. 在项目根目录下创建一个 purgecss.config.js 文件,添加以下配置:
```
module.exports = {
content: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'nuxt.config.js'
],
whitelist: ['html', 'body'],
whitelistPatterns: [/^nuxt-/, /^page-/],
whitelistPatternsChildren: [/^token/, /^pre/, /^code/]
}
```
这里的 content 选项指定了需要匹配 CSS 的文件路径,whitelist 选项指定了白名单,保留 html 和 body 标签的样式,whitelistPatterns 则指定了对哪些样式类名进行保留,whitelistPatternsChildren 则指定了对哪些子元素的样式进行保留。
4. 最后,在 package.json 文件中添加以下 scripts:
```
"scripts": {
"build": "nuxt build",
"generate": "nuxt generate",
"purgecss": "purgecss --config purgecss.config.js --out static/css/ --css static/css/*.css"
}
```
这里添加了一个名为 purgecss 的脚本,运行时会使用 purgecss.config.js 配置文件,并将输出的 CSS 文件保存在 static/css/ 目录下。
现在,你可以在终端中运行以下命令,使用 PurgeCSS 清除 Nuxt2 打包后的 CSS:
```
yarn run purgecss
```