Skip to content

docs: 更新 unocss ESM 兼容示例 #2580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Blackgan3 wants to merge 1 commit into
base: master
Choose a base branch
from
+13 −11
Open

docs: 更新 unocss ESM 兼容示例 #2580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions docs-vitepress/api/compile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1535,7 +1535,7 @@ module.exports = defineConfig({

Mpx 编译 unocss 原子类的 webpack 主插件

如果在使用 `@mpxjs/cli@3.x` 创建项目时选择了 unocss，会自动安装 MpxUnocssPlugin ，直接在 mpx.unocss 配置项中传入相关配置即可
如果在使用 `@mpxjs/cli@3.x` 创建项目时选择了 unocss，脚手架会自动安装并注册 `MpxUnocssPlugin`，直接在 `mpx.unocss` 配置项中传入相关配置即可
```js
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
Expand All @@ -1562,7 +1562,8 @@ yarn add -D @mpxjs/unocss-plugin

```js
// vue.config.js
const MpxUnocssPlugin = require('@mpxjs/unocss-plugin')
const MpxUnocssPluginModule = require('@mpxjs/unocss-plugin')
const MpxUnocssPlugin = MpxUnocssPluginModule.default || MpxUnocssPluginModule
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
Expand All @@ -1576,6 +1577,8 @@ yarn add -D @mpxjs/unocss-plugin
})
```

> `@mpxjs/unocss-plugin@2.11.1` 起以 ESM 形式发布。在 CommonJS 配置文件中通过 `require()` 加载时，需要兼容读取默认导出；以上写法同时兼容旧版 CommonJS 导出。在不额外启用实验参数的情况下，上述 CommonJS 兼容写法要求 Node.js 版本满足 `^20.19.0 || >=22.12.0`。

插件支持配置如下：

### unoFile
Expand Down
17 changes: 8 additions & 9 deletions docs-vitepress/guide/advance/utility-first-css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,8 @@

```js
const { defineConfig } = require('unocss')
const presetMpx = require('@mpxjs/unocss-base')
const presetMpxModule = require('@mpxjs/unocss-base')
const presetMpx = presetMpxModule.default || presetMpxModule

module.exports = defineConfig({
presets: [
Expand All @@ -89,11 +90,14 @@ module.exports = defineConfig({
3. 注册`MpxUnocssPlugin`，在`build/getPlugins`中添加如下代码：

```js
const MpxUnocssPlugin = require('@mpxjs/unocss-plugin')
const MpxUnocssPluginModule = require('@mpxjs/unocss-plugin')
const MpxUnocssPlugin = MpxUnocssPluginModule.default || MpxUnocssPluginModule
// ...
plugins.push(new MpxUnocssPlugin())
```

> `@mpxjs/unocss-plugin@2.11.1` 与 `@mpxjs/unocss-base@2.11.1` 起以 ESM 形式发布。在 CommonJS 配置文件中通过 `require()` 加载时，需要兼容读取默认导出；以上写法同时兼容旧版 CommonJS 导出。在不额外启用实验参数的情况下，上述 CommonJS 兼容写法要求 Node.js 版本满足 `^20.19.0 || >=22.12.0`。

即可在项目模版中使用基于`unocss`的原子类功能，`unocss`默认的preset兼容`tailwindcss`/`windicss`
，可以通过查阅[tailwindcss文档](https://tailwindcss.com/docs/installation)、[windicss文档](https://windicss.org/utilities/general/colors.html)或[unocss可交互文档](https://unocss.dev/interactive/)进行探索使用。

Expand All @@ -120,10 +124,8 @@ plugins.push(new MpxUnocssPlugin())
```js
// uno.config.js
const { defineConfig } = require('unocss')
const presetMpx = require('@mpxjs/unocss-base')

const { defineConfig } = require("unocss")
const presetMpx = require("@mpxjs/unocss-base")
const presetMpxModule = require('@mpxjs/unocss-base')
const presetMpx = presetMpxModule.default || presetMpxModule

module.exports = defineConfig({
content: {
Expand Down Expand Up @@ -366,6 +368,3 @@ const escapeMap = {






Loading