Nuxt2打包清除css 怎么npm下载 使用purgeCSS
时间: 2023-09-05 16:07:51 浏览: 48
要使用 purgeCSS 清除未使用的 CSS,需要在 Nuxt.js 项目中安装以下两个依赖项:
1. `@fullhuman/postcss-purgecss`
2. `purgecss`
你可以使用以下命令来安装它们:
```
npm install @fullhuman/postcss-purgecss purgecss --save-dev
```
安装完成后,你需要在 `nuxt.config.js` 文件中配置 purgeCSS。
```js
// nuxt.config.js
build: {
postcss: {
plugins: {
'@fullhuman/postcss-purgecss': {
content: [
'./pages/**/*.vue',
'./layouts/**/*.vue',
'./components/**/*.vue'
],
whitelist: ['html', 'body'],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
}
}
}
}
```
这里的 `content` 属性定义了需要扫描的文件路径,`whitelist` 属性定义了需要保留的 CSS 选择器,`defaultExtractor` 属性定义了如何提取未使用的 CSS 选择器。
配置完成后,你可以使用以下命令来启动 Nuxt.js 开发服务器,并在控制台输出清除未使用的 CSS 选择器的结果。
```
npm run dev
```
在生产环境中,你可以使用以下命令来构建和打包 Nuxt.js 应用程序,并清除未使用的 CSS 选择器。
```
npm run build
```