From 9c787eef7718fd4a565ba64019e4e699a713b7ad Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 28 Oct 2024 17:55:15 +0800 Subject: [PATCH] docs: add practices for multiple Less plugins --- website/docs/en/plugins/list/plugin-less.mdx | 24 ++++++++++++++++ website/docs/en/plugins/list/plugin-sass.mdx | 30 +++++++++++++++++--- website/docs/zh/plugins/list/plugin-less.mdx | 24 ++++++++++++++++ website/docs/zh/plugins/list/plugin-sass.mdx | 30 +++++++++++++++++--- 4 files changed, 100 insertions(+), 8 deletions(-) diff --git a/website/docs/en/plugins/list/plugin-less.mdx b/website/docs/en/plugins/list/plugin-less.mdx index 818f0d8fc3..f837e9f20d 100644 --- a/website/docs/en/plugins/list/plugin-less.mdx +++ b/website/docs/en/plugins/list/plugin-less.mdx @@ -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? diff --git a/website/docs/en/plugins/list/plugin-sass.mdx b/website/docs/en/plugins/list/plugin-sass.mdx index a9087c7be6..957a21a7d7 100644 --- a/website/docs/en/plugins/list/plugin-sass.mdx +++ b/website/docs/en/plugins/list/plugin-sass.mdx @@ -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). @@ -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. @@ -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. @@ -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 + }, + }), + ], +}; +``` diff --git a/website/docs/zh/plugins/list/plugin-less.mdx b/website/docs/zh/plugins/list/plugin-less.mdx index 8b94386b77..c3b08a29d4 100644 --- a/website/docs/zh/plugins/list/plugin-less.mdx +++ b/website/docs/zh/plugins/list/plugin-less.mdx @@ -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 文件中的除法不生效？ diff --git a/website/docs/zh/plugins/list/plugin-sass.mdx b/website/docs/zh/plugins/list/plugin-sass.mdx index 9ff9e8ec63..df4e0673b0 100644 --- a/website/docs/zh/plugins/list/plugin-sass.mdx +++ b/website/docs/zh/plugins/list/plugin-sass.mdx @@ -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)。 @@ -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 写法。 @@ -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) 选项来忽略这些警告。 @@ -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 + }, + }), + ], +}; +```