fix: allow users to customize react/sass/less plugin options (#1147)

web-infra-dev · Jun 4, 2024 · d4432ac · d4432ac
1 parent c451c8f
commit d4432ac
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 8 deletions.
diff --git a/packages/core/src/node/initRsbuild.ts b/packages/core/src/node/initRsbuild.ts
@@ -7,7 +7,11 @@ import {
   removeTrailingSlash,
 } from '@rspress/shared';
 import fs from '@rspress/shared/fs-extra';
-import type { RsbuildInstance, RsbuildConfig } from '@rsbuild/core';
+import type {
+  RsbuildInstance,
+  RsbuildConfig,
+  RsbuildPlugin,
+} from '@rsbuild/core';
 import {
   CLIENT_ENTRY,
   SSR_ENTRY,
@@ -25,6 +29,9 @@ import { initRouteService } from './route/init';
 import { PluginDriver } from './PluginDriver';
 import { RouteService } from './route/RouteService';
 import { detectCustomIcon } from './utils/detectCustomIcon';
+import { PLUGIN_REACT_NAME, pluginReact } from '@rsbuild/plugin-react';
+import { PLUGIN_SASS_NAME, pluginSass } from '@rsbuild/plugin-sass';
+import { PLUGIN_LESS_NAME, pluginLess } from '@rsbuild/plugin-less';
 
 export interface MdxRsLoaderCallbackContext {
   resourcePath: string;
@@ -33,6 +40,15 @@ export interface MdxRsLoaderCallbackContext {
   base: string;
 }
 
+function isPluginIncluded(config: UserConfig, pluginName: string): boolean {
+  return (
+    config.builderPlugins?.some(plugin => plugin.name === pluginName) ||
+    config.builderConfig?.plugins?.some(
+      plugin => plugin && (plugin as RsbuildPlugin).name === pluginName,
+    )
+  );
+}
+
 async function createInternalBuildConfig(
   userDocRoot: string,
   config: UserConfig,
@@ -41,10 +57,6 @@ async function createInternalBuildConfig(
   pluginDriver: PluginDriver,
   runtimeTempDir: string,
 ): Promise<RsbuildConfig> {
-  const { pluginReact } = await import('@rsbuild/plugin-react');
-  const { pluginSass } = await import('@rsbuild/plugin-sass');
-  const { pluginLess } = await import('@rsbuild/plugin-less');
-
   const cwd = process.cwd();
   const CUSTOM_THEME_DIR =
     config?.themeDir ?? path.join(process.cwd(), 'theme');
@@ -85,9 +97,9 @@ async function createInternalBuildConfig(
 
   return {
     plugins: [
-      pluginReact(),
-      pluginSass(),
-      pluginLess(),
+      ...(isPluginIncluded(config, PLUGIN_REACT_NAME) ? [] : [pluginReact()]),
+      ...(isPluginIncluded(config, PLUGIN_SASS_NAME) ? [] : [pluginSass()]),
+      ...(isPluginIncluded(config, PLUGIN_LESS_NAME) ? [] : [pluginLess()]),
       rsbuildPluginDocVM({
         userDocRoot,
         config,

diff --git a/packages/document/docs/en/api/config/config-build.mdx b/packages/document/docs/en/api/config/config-build.mdx
@@ -72,6 +72,27 @@ export default defineConfig({
 });
 ```
 
+You can also override the built-in plugins [@rsbuild/plugin-react](https://rsbuild.dev/plugins/list/plugin-react), [@rsbuild/plugin-sass](https://rsbuild.dev/plugins/list/plugin-sass) and [@rsbuild/plugin-less](https://rsbuild.dev/plugins/list/plugin-less), and customize relevant plugin options.
+
+- Example: Modify related options of built-in [@rsbuild/plugin-less](https://rsbuild.dev/plugins/list/plugin-less) plugin
+
+```ts title="rspress.config.ts"
+import { defineConfig } from 'rspress/config';
+import { pluginLess } from '@rsbuild/plugin-less';
+
+export default defineConfig({
+  builderPlugins: [
+    pluginLess({
+      lessLoaderOptions: {
+        lessOptions: {
+          math: 'always',
+        },
+      },
+    }),
+  ],
+});
+```
+
 ### Default Config
 
 If you need to view the default Rspack or Rsbuild configs, you can add the `DEBUG=rsbuild` parameter when running the `rspress dev` or `rspress build` command:

diff --git a/packages/document/docs/zh/api/config/config-build.mdx b/packages/document/docs/zh/api/config/config-build.mdx
@@ -72,6 +72,27 @@ export default defineConfig({
 });
 ```
 
+你也可以覆盖内置的 [@rsbuild/plugin-react](https://rsbuild.dev/zh/plugins/list/plugin-react)、[@rsbuild/plugin-sass](https://rsbuild.dev/zh/plugins/list/plugin-sass) 和 [@rsbuild/plugin-less](https://rsbuild.dev/zh/plugins/list/plugin-less) 插件，并传入相关插件选项。
+
+- 示例：修改内置的 [@rsbuild/plugin-less](https://rsbuild.dev/zh/plugins/list/plugin-less) 插件的相关选项
+
+```ts title="rspress.config.ts"
+import { defineConfig } from 'rspress/config';
+import { pluginLess } from '@rsbuild/plugin-less';
+
+export default defineConfig({
+  builderPlugins: [
+    pluginLess({
+      lessLoaderOptions: {
+        lessOptions: {
+          math: 'always',
+        },
+      },
+    }),
+  ],
+});
+```
+
 ### 默认配置
 
 如果你需要查看默认的 Rspack 或 Rsbuild 配置，可以在执行 `rspress dev` 或 `rspress build` 命令时，添加 `DEBUG=rsbuild` 参数：