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: add practices for multiple Less plugins #3850

Merged
merged 1 commit into from
Oct 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
24 changes: 24 additions & 0 deletions website/docs/en/plugins/list/plugin-less.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,30 @@ pluginLess({
});
```

## Practices

### Configure multiple Less plugins

By using the `include` and `exclude` options, you can register multiple Less plugins and specify different options for each plugin.

For example:

```ts
export default {
plugins: [
pluginLess({
exclude: /\.another\.less$/,
}),
pluginLess({
include: /\.another\.less$/,
lessLoaderOptions: {
// some custom options
},
}),
],
};
```

## FAQ

### Division in Less file doesn't work?
Expand Down
30 changes: 26 additions & 4 deletions website/docs/en/plugins/list/plugin-sass.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,9 @@ pluginSass({
});
```

## Custom Sass
## Practices

### Sass Implementation
### Modify Sass Implementation

Sass provides several implementations, including [sass](https://www.npmjs.com/package/sass), [sass-embedded](https://www.npmjs.com/package/sass-embedded), and [node-sass](https://www.npmjs.com/package/node-sass).

Expand All @@ -133,7 +133,7 @@ pluginSass({
Switching from `sass-embedded` to another Sass implementation can significantly decrease build performance.
:::

### Sass API
### Select Sass API

Rsbuild uses the latest `modern-compiler` API by default. If you rely on the `legacy` API of Sass, you can set the `api` option of the sass-loader to `legacy` to maintain compatibility with some deprecated Sass syntax.

Expand All @@ -149,7 +149,7 @@ pluginSass({
Sass's `legacy` API has been deprecated and will be removed in Sass 2.0. It is recommended to migrate to the `modern-compiler` API. For more details, see [Sass - Legacy JS API](https://sass-lang.com/documentation/breaking-changes/legacy-js-api/).
:::

## Sass Deprecation Warnings
### Ignore Sass Deprecation Warnings

Sass uses warning logs to notify you of deprecated usages that will be removed in future major releases of Sass. It is recommended to make changes as suggested by the logs. If you do not want to see these logs, you can ignore these warnings by using the [silenceDeprecations](https://sass-lang.com/documentation/js-api/interfaces/stringoptions/#silenceDeprecations) option in Sass.

Expand All @@ -176,3 +176,25 @@ pluginSass({
```

> For more information, see [Sass Deprecations](https://sass-lang.com/documentation/js-api/interfaces/deprecations/).

### Configure multiple Sass plugins

By using the `include` and `exclude` options, you can register multiple Sass plugins and specify different options for each plugin.

For example:

```ts
export default {
plugins: [
pluginSass({
exclude: /\.another\.scss$/,
}),
pluginSass({
include: /\.another\.scss$/,
sassLoaderOptions: {
// some custom options
},
}),
],
};
```
24 changes: 24 additions & 0 deletions website/docs/zh/plugins/list/plugin-less.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,30 @@ pluginLess({
});
```

## 实践

### 配置多个 Less 插件

通过使用 `include` 和 `exclude` 选项,你可以同时注册多个 Less 插件,并为每个插件指定不同的选项。

例如:

```ts
export default {
plugins: [
pluginLess({
exclude: /\.another\.less$/,
}),
pluginLess({
include: /\.another\.less$/,
lessLoaderOptions: {
// some custom options
},
}),
],
};
```

## 常见问题

### Less 文件中的除法不生效?
Expand Down
30 changes: 26 additions & 4 deletions website/docs/zh/plugins/list/plugin-sass.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,9 @@ pluginSass({
});
```

## 自定义 Sass
## 实践

### Sass implementation
### 修改 Sass implementation

Sass 提供了多种实现,包括 [sass](https://www.npmjs.com/package/sass)、[sass-embedded](https://www.npmjs.com/package/sass-embedded) 和 [node-sass](https://www.npmjs.com/package/node-sass)。

Expand All @@ -133,7 +133,7 @@ pluginSass({
将 `sass-embedded` 修改为其他 Sass 实现,可能会构建性能显著下降。
:::

### Sass API
### 选择 Sass API

Rsbuild 默认使用最新的 `modern-compiler` API,如果你依赖了 Sass 的 `legacy` API,可以将 sass-loader 的 [api](https://github.com/webpack-contrib/sass-loader?tab=readme-ov-file#api) 选项设置为 `legacy`,以兼容一些废弃的 Sass 写法。

Expand All @@ -149,7 +149,7 @@ pluginSass({
Sass 的 `legacy` API 已经被废弃,并且将在 Sass 2.0 中被移除,建议迁移到 `modern-compiler` API,详见 [Sass - Legacy JS API](https://sass-lang.com/documentation/breaking-changes/legacy-js-api/)。
:::

## Sass 废弃提示
### 忽略 Sass 废弃提示

Sass 会通过 warning 日志提示你一些废弃的写法,这些写法在 Sass 未来的大版本中将会被移除,建议根据日志进行修改。如果你不想看到这些日志,可以通过 Sass 的 [silenceDeprecations](https://sass-lang.com/documentation/js-api/interfaces/stringoptions/#silenceDeprecations) 选项来忽略这些警告。

Expand All @@ -176,3 +176,25 @@ pluginSass({
```

> 请查看 [Sass Deprecations](https://sass-lang.com/documentation/js-api/interfaces/deprecations/) 了解更多信息。

### 配置多个 Sass 插件

通过使用 `include` 和 `exclude` 选项,你可以同时注册多个 Sass 插件,并为每个插件指定不同的选项。

例如:

```ts
export default {
plugins: [
pluginSass({
exclude: /\.another\.scss$/,
}),
pluginSass({
include: /\.another\.scss$/,
sassLoaderOptions: {
// some custom options
},
}),
],
};
```
Loading