https://github.com/markthree/nuxt-style-extractor
Extracts the style of the page as an external css when rendered on the server side | 提取服务端渲染时页面的 style 为外部 css
https://github.com/markthree/nuxt-style-extractor
css extractor nuxt optimization style
Last synced: 7 months ago
JSON representation
Extracts the style of the page as an external css when rendered on the server side | 提取服务端渲染时页面的 style 为外部 css
- Host: GitHub
- URL: https://github.com/markthree/nuxt-style-extractor
- Owner: markthree
- Created: 2024-08-16T14:03:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-23T13:28:54.000Z (over 1 year ago)
- Last Synced: 2024-10-25T02:08:54.563Z (over 1 year ago)
- Topics: css, extractor, nuxt, optimization, style
- Language: TypeScript
- Homepage:
- Size: 749 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# nuxt-style-extractor
Extracts the style of the page as an external css when rendered on the server
side
## README 🦉
[简体中文](./README_CN.md) | English
## Motivation
Faster rendering and more readable seo
## Features
- 🚠 Optimal Caching
- ⛰ Supports ssg, ssr and ssr with pre-rendering.
- 🌲 Intelligent minification extraction, removing unused styles from the
page, merging duplicate styles
## Quick Setup
### Install the module
```bash
npm i nuxt-style-extractor
```
### Setup Module
```ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ["nuxt-style-extractor"],
});
```
That's all. Everything's automatic.
### Configuration
Of course, you can also configure it.
```ts
// nuxt.config.ts
export default defineNuxtConfig({
styleExtractor: {
minify: true, // Whether to enable minification
removeUnused: true, // Whether to remove unused styles
},
});
```
#### Preserve Original State
If you don't need any optimization and want to maintain the original order of styles, you can set `original` to `true`
```ts
export default defineNuxtConfig({
styleExtractor: {
original: true, // Only extract CSS without any optimization processing
},
});
```
#### Custom Transformer
```ts
// style-extractor.js
export default (options) => {
return options.css + "body { background: red }";
};
// nuxt.config.ts
export default defineNuxtConfig({
styleExtractor: {
transformFile: "style-extractor.js",
},
});
```