Skip to content
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.

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

docs(cn): integrations/rollup translation #13

Merged
merged 11 commits into from
May 27, 2021
36 changes: 18 additions & 18 deletions integrations/rollup.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<Logo name="rollup" class="logo-float-xl"/>

# Integration for [Rollup](https://rollupjs.org)
# [Rollup](https://rollupjs.org) 集成 {#integration-for-rollup}

<PackageInfo
name="rollup-plugin-windicss"
repo="vite-plugin-windicss/tree/main/packages/rollup-plugin-windicss"
author="antfu"
/>

## Installations
## 安装 {#installations}

```bash
npm i rollup-plugin-windicss -D # yarn add rollup-plugin-windicss -D
Expand All @@ -26,18 +26,18 @@ export default {
```

```ts
// your code entry
// 你的代码入口
import 'virtual:windi.css'
```

That's all.
仅此而已。


## Configuration
## 配置文件 {#configuration}
QC-L marked this conversation as resolved.
Show resolved Hide resolved
HerbertHe marked this conversation as resolved.
Show resolved Hide resolved
QC-L marked this conversation as resolved.
Show resolved Hide resolved

### Preflight (style reseting)
### 预检样式 (样式重写) {#preflight-style-reseting}

Preflight is enables on demanded, if you'd like to completely disable it, you can configure it as below
预检样式 (Preflight) 随需启用,如果你想完全关掉它,可按照下面进行配置

```ts
// vite.config.js
Expand All @@ -50,16 +50,16 @@ export default {
}
```

### Safelist
### 安全清单 {#safelist}

By default, we scan your source code statically and find all the usages of the utilities then generated corresponding CSS on-demand. However, there is some limitation that utilities that decided in the runtime can not be matched efficiently, for example
默认情况下,我们会静态扫描你的源代码,并找出所有用到的工具类 (utilities),然后随需生成响应的 CSS。然而,这存在一定限制,运行时生成的工具类并不能被高效地匹配。举个例子:

```html
<!-- will not be detected -->
<!-- 不会被侦测到 -->
<div className={`p-${size}`}>
```

For that, you will need to specify the possible combinations in the `safelist` options of `vite.config.js`.
为了实现这个,你需要在 `vite.config.js` 中的 `safelist` 选项中指定可能的组合。

```ts
// vite.config.js
Expand All @@ -72,7 +72,7 @@ export default {
}
```

Or you can do it this way
或者你可以这样做

```ts
function range(size, startAt = 1) {
Expand All @@ -92,24 +92,24 @@ export default {
}
```

### Scanning
### 扫描 {#scanning}

On server start, `vite-plugin-windicss` will scan your source code and extract the utilities usages. By default, only files under `src/` with extensions `vue, html, mdx, pug, jsx, tsx` will be included. If you want to enable scaning for other file type of locations, you can configure it via:
当服务启动后,`vite-plugin-windicss` 将扫描你的源代码,并把使用到的工具类提取出来。默认情况下,只有 `src/` 且后缀为 `vue, html, mdx, pug, jsx, tsx` 的文件才会被扫描。如果你想扫描本地的其他文件,你可以进行配置如下:

```ts
// vite.config.js
export default {
plugins: [
WindiCSS({
scan: {
dirs: ['.'], // all files in the cwd
fileExtensions: ['vue', 'js', 'ts'], // also enabled scanning for js/ts
dirs: ['.'], // cwd 中所有的文件
fileExtensions: ['vue', 'js', 'ts'], // 为js、ts文件启用
},
}),
],
}
```

### More
### 更多 {#more}

See [options.ts](https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts) for more configuration reference.
欲了解更多,请参考 [options.ts](https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts)