@modern-js/app-tools 3.9.1 → 3.9.3

package/dist/esm-node/plugins/analyze/index.mjs

@@ -24,7 +24,7 @@ const analyze = ()=>({
                 const resolvedConfig = api.getNormalizedConfig();
                 const hooks = api.getHooks();
                 try {
-                    if (checkIsBuildCommands(appContext.command)) fs.emptydirSync(appContext.internalDirectory);
+                    if (checkIsBuildCommands()) fs.emptydirSync(appContext.internalDirectory);
                 } catch  {}
                 const apiOnly = await isApiOnly(appContext.appDirectory, resolvedConfig.source?.entriesDir, appContext.apiDirectory);
                 const [{ getProdServerRoutes }] = await Promise.all([
@@ -118,7 +118,7 @@ const analyze = ()=>({
                     htmlTemplates
                 };
                 api.updateAppContext(appContext);
-                if (checkIsBuildCommands(appContext.command)) {
+                if (checkIsBuildCommands()) {
                     await hooks.generateEntryCode.call({
                         entrypoints
                     });

package/dist/esm-node/plugins/analyze/utils.mjs

@@ -10,14 +10,14 @@ const walkDirectory = (dir)=>fs.readdirSync(dir).reduce((previous, filename)=>{
             ...previous,
             ...walkDirectory(filePath)
         ];
-        return [
+        else return [
             ...previous,
             filePath
         ];
     }, []);
 const replaceWithAlias = (base, filePath, alias)=>{
     if (filePath.includes(base)) return normalizeToPosixPath(path.join(alias, path.relative(base, filePath)));
-    return filePath;
+    else return filePath;
 };
 const parseModule = async ({ source, filename })=>{
     let content = source;
@@ -53,7 +53,7 @@ const parseModule = async ({ source, filename })=>{
     return await parse(content);
 };
 const getServerCombinedModuleFile = (internalDirectory, entryName)=>path.join(internalDirectory, entryName, 'server-loader-combined.js');
-const checkIsBuildCommands = (contextCommand)=>{
+const checkIsBuildCommands = ()=>{
     const buildCommands = [
         'dev',
         'start',
@@ -63,8 +63,7 @@ const checkIsBuildCommands = (contextCommand)=>{
         'dev-worker'
     ];
     const command = getCommand();
-    if (buildCommands.includes(command)) return true;
-    return 'dev' === contextCommand || 'start' === contextCommand || 'build' === contextCommand || 'deploy' === contextCommand;
+    return buildCommands.includes(command);
 };
 const checkIsServeCommand = ()=>{
     const command = getCommand();

package/dist/esm-node/plugins/initialize/index.mjs

@@ -26,7 +26,7 @@ const initialize = ()=>({
             api.modifyResolvedConfig(async (resolved)=>{
                 let appContext = api.getAppContext();
                 const userConfig = api.getConfig();
-                const port = await getServerPort(resolved, appContext.command);
+                const port = await getServerPort(resolved);
                 appContext = {
                     ...appContext,
                     port,
@@ -61,10 +61,9 @@ function stabilizeConfig(resolve, config, keys) {
         resolve[key] = config[key] || {};
     });
 }
-async function getServerPort(config, contextCommand) {
+async function getServerPort(config) {
     const prodPort = Number(process.env.PORT) || config.server.port || 8080;
-    const isProgrammaticDev = 'dev' === contextCommand || 'start' === contextCommand;
-    if (isDev() && (isDevCommand() || isProgrammaticDev)) return getPort(Number(process.env.PORT) || prodPort);
+    if (isDev() && isDevCommand()) return getPort(Number(process.env.PORT) || prodPort);
     return prodPort;
 }
 export default initialize;

package/dist/types/index.d.ts

@@ -3,12 +3,10 @@ import { initAppContext } from './utils/initAppContext.js';
 export * from './defineConfig.js';
 export declare const appTools: () => CliPlugin<AppTools>;
 export { defineConfig } from './defineConfig.js';
-export { build } from './commands/build.js';
-export { deploy } from './commands/deploy.js';
 export { dev } from './commands/dev.js';
 export { serve } from './commands/serve.js';
 export { closeServer } from './utils/createServer.js';
-export type { BuildOptions, DeployOptions, DevOptions } from './utils/types.js';
+export type { DeployOptions, DevOptions } from './utils/types.js';
 export { generateWatchFiles } from './utils/generateWatchFiles.js';
 export { resolveModernRsbuildConfig, type ResolveModernRsbuildConfigOptions, } from './rsbuild.js';
 export * from './types/index.js';

package/dist/types/plugins/analyze/utils.d.ts

@@ -5,6 +5,6 @@ export declare const parseModule: ({ source, filename, }: {
     filename: string;
 }) => Promise<readonly [imports: readonly import("es-module-lexer").ImportSpecifier[], exports: readonly import("es-module-lexer").ExportSpecifier[], facade: boolean, hasModuleSyntax: boolean]>;
 export declare const getServerCombinedModuleFile: (internalDirectory: string, entryName: string) => string;
-export declare const checkIsBuildCommands: (contextCommand?: string) => boolean;
+export declare const checkIsBuildCommands: () => boolean;
 export declare const checkIsServeCommand: () => boolean;
 export declare const isSubDirOrEqual: (parent: string, child: string) => boolean;

package/docs/configure/app/output/disable-svgr.md

@@ -3,6 +3,10 @@
 - **Type:** `boolean`
 - **Default:** `false`
 
+:::warning Deprecated
+`output.disableSvgr` is deprecated and will be removed in the next major version. Replace `output.disableSvgr: true` with [tools.svgr](/configure/app/tools/svgr.md) set to `false`; `output.disableSvgr: false` is the default behavior and can simply be removed. When both are set, `tools.svgr` wins.
+:::
+
 Whether to transform SVGs into React components. If true, will treat all .svg files as assets.
 
 By default, when an SVG resource is referenced in a JS file, Modern.js will call SVGR to convert the SVG into a React component. If you are sure that all SVG resources in your project are not being used as React components, you can turn off this conversion by setting `disableSvgr` to true to improve build performance.

package/docs/configure/app/output/svg-default-export.md

@@ -3,6 +3,10 @@
 - **Type:** `'url' | 'component'`
 - **Default:** `'url'`
 
+:::warning Deprecated
+`output.svgDefaultExport` is deprecated and will be removed in the next major version. Use `svgrOptions.exportType` of [tools.svgr](/configure/app/tools/svgr.md) instead: `'component'` maps to `exportType: 'default'`, `'url'` maps to `exportType: 'named'`. When both are set, `tools.svgr` wins.
+:::
+
 `output.svgDefaultExport` is used to configure the default export type of SVG files.
 
 When `output.svgDefaultExport` is set to `url` , the default export of SVG files is the URL of the file. For example:

package/docs/configure/app/tools/less.md

@@ -5,49 +5,78 @@
 
 ```js
 const defaultOptions = {
-  lessOptions: {
-    javascriptEnabled: true,
+  lessLoaderOptions: {
+    lessOptions: {
+      javascriptEnabled: true,
+    },
+    // CSS Source Map enabled by default in development environment
+    sourceMap: isDev,
   },
-  // CSS Source Map enabled by default in development environment
-  sourceMap: isDev,
 };
 ```
 
-You can modify the config of [less-loader](https://github.com/webpack-contrib/less-loader) via `tools.less`.
+`tools.less` modifies the options of [@rsbuild/plugin-less](https://rsbuild.rs/plugins/list/plugin-less). It accepts the full plugin options:
+
+| Option              | Description                                                                                         |
+| ------------------- | --------------------------------------------------------------------------------------------------- |
+| `lessLoaderOptions` | Options passed to [less-loader](https://github.com/webpack-contrib/less-loader), object or function |
+| `include`           | Files handled by less-loader, defaults to `/\.less$/`                                               |
+| `exclude`           | Files that less-loader should skip                                                                  |
+| `parallel`          | Whether to compile Less modules in worker threads, defaults to `false`                              |
+
+### Modifying less-loader options
 
-### Object Type
+When `lessLoaderOptions` is an `Object`, it is merged with the default config through Object.assign in a shallow way. It should be noted that `lessOptions` is merged through deepMerge in a deep way. For example:
+
+```js
+export default {
+  tools: {
+    less: {
+      lessLoaderOptions: {
+        lessOptions: {
+          javascriptEnabled: false,
+        },
+      },
+    },
+  },
+};
+```
 
-When `tools.less` is configured as `Object` type, it is merged with the default config through Object.assign in a shallow way. It should be noted that `lessOptions` is merged through deepMerge in a deep way. For example:
+When `lessLoaderOptions` is a `Function`, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For example:
 
 ```js
 export default {
   tools: {
     less: {
-      lessOptions: {
-        javascriptEnabled: false,
+      lessLoaderOptions(config) {
+        // Modify the config of lessOptions
+        config.lessOptions = {
+          javascriptEnabled: false,
+        };
       },
     },
   },
 };
 ```
 
-### Function Type
+### Parallel compilation
 
-When `tools.less` is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For example:
+Less compilation is pure JavaScript and runs on the Node.js main thread by default. With `parallel` enabled, Less modules are compiled in a pool of worker threads, which shortens the build when a project has many Less files.
 
 ```js
 export default {
   tools: {
-    less(config) {
-      // Modify the config of lessOptions
-      config.lessOptions = {
-        javascriptEnabled: false,
-      };
+    less: {
+      parallel: true,
     },
   },
 };
 ```
 
+:::tip
+Options sent to worker threads must satisfy the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). With `parallel` enabled, `lessLoaderOptions` therefore cannot contain functions, such as an `additionalData` function or a custom `implementation`.
+:::
+
 ### Modifying Less Version
 
 In some scenarios, if you need to use a specific version of Less instead of the built-in Less v4 in Modern.js, you can install the desired Less version in your project and set it up using the `implementation` option of the `less-loader`.
@@ -56,7 +85,9 @@ In some scenarios, if you need to use a specific version of Less instead of the
 export default {
   tools: {
     less: {
-      implementation: require('less'),
+      lessLoaderOptions: {
+        implementation: require('less'),
+      },
     },
   },
 };
@@ -73,8 +104,52 @@ Used to specify which files `less-loader` does not compile, You can pass in one
 ```js
 export default {
   tools: {
-    less(config, { addExcludes }) {
-      addExcludes(/node_modules/);
+    less: {
+      lessLoaderOptions(config, { addExcludes }) {
+        addExcludes(/node_modules/);
+      },
+    },
+  },
+};
+```
+
+The plugin's `exclude` option is the recommended equivalent:
+
+```js
+export default {
+  tools: {
+    less: {
+      exclude: /node_modules/,
+    },
+  },
+};
+```
+
+### Legacy form
+
+:::warning Do not mix the two layers
+As soon as an object contains a plugin-level key (`lessLoaderOptions`, `include`, `exclude`, ...), the whole object is parsed as plugin options and any loader option in it has no effect. For example, `lessOptions` in `tools.less: { parallel: true, lessOptions: { ... } }` is ignored and must be moved under `lessLoaderOptions`; a hint is printed in development.
+:::
+
+In earlier versions, `tools.less` took the less-loader options directly, e.g. `tools.less: { lessOptions: {} }` or `tools.less(config, { addExcludes }) {}`. This form still works: Modern.js wraps it into `lessLoaderOptions` and produces exactly the same config as before. A migration hint is printed in development, and the legacy form will be removed in the next major version.
+
+```js
+// legacy
+export default {
+  tools: {
+    less: {
+      lessOptions: { javascriptEnabled: false },
+    },
+  },
+};
+
+// current
+export default {
+  tools: {
+    less: {
+      lessLoaderOptions: {
+        lessOptions: { javascriptEnabled: false },
+      },
     },
   },
 };

package/docs/configure/app/tools/sass.md

@@ -5,41 +5,64 @@
 
 ```js
 const defaultOptions = {
-  // CSS Source Map enabled by default in development environment
-  sourceMap: isDev,
+  sassLoaderOptions: {
+    // CSS Source Map enabled by default in development environment
+    sourceMap: isDev,
+  },
 };
 ```
 
-You can modify the config of [sass-loader](https://github.com/webpack-contrib/sass-loader) via `tools.sass`.
+`tools.sass` modifies the options of [@rsbuild/plugin-sass](https://rsbuild.rs/plugins/list/plugin-sass). It accepts the full plugin options:
 
-### Object Type
+| Option              | Description                                                                                         |          |
+| ------------------- | --------------------------------------------------------------------------------------------------- | -------- |
+| `sassLoaderOptions` | Options passed to [sass-loader](https://github.com/webpack-contrib/sass-loader), object or function |          |
+| `include`           | Files handled by sass-loader, defaults to \`/.s(?:a                                                 | c)ss$/\` |
+| `exclude`           | Files that sass-loader should skip                                                                  |          |
+| `rewriteUrls`       | Whether to rewrite relative URLs in Sass files with resolve-url-loader, defaults to `true`          |          |
 
-When `tools.sass` is `Object` type, it is merged with the default config through Object.assign. It should be noted that `sassOptions` is merged through deepMerge in a deep way.
+### Modifying sass-loader options
 
-For example:
+When `sassLoaderOptions` is an `Object`, it is merged with the default config through Object.assign in a shallow way. It should be noted that `sassOptions` is merged through deepMerge in a deep way. For example:
 
 ```js
 export default {
   tools: {
     sass: {
-      sourceMap: true,
+      sassLoaderOptions: {
+        sourceMap: true,
+      },
+    },
+  },
+};
+```
+
+When `sassLoaderOptions` is a `Function`, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For example:
+
+```js
+export default {
+  tools: {
+    sass: {
+      sassLoaderOptions(config) {
+        // Modify the additionalData config
+        config.additionalData = async (content, loaderContext) => {
+          // ...
+        };
+      },
     },
   },
 };
 ```
 
-### Function Type
+### Disabling URL rewriting
 
-When `tools.sass` is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For Example:
+By default, relative URLs in Sass files are rewritten by resolve-url-loader so that they resolve relative to the source file. If your project does not rely on this, turn it off to drop one loader from the chain:
 
 ```js
 export default {
   tools: {
-    sass(config) {
-      // Modify sourceMap config
-      config.additionalData = async (content, loaderContext) => {
-        // ...
-      };
+    sass: {
+      rewriteUrls: false,
     },
   },
 };
@@ -53,13 +76,15 @@ In some scenarios, if you need to use a specific version of Sass instead of the
 export default {
   tools: {
     sass: {
-      implementation: require('sass'),
+      sassLoaderOptions: {
+        implementation: require('sass'),
+      },
     },
   },
 };
 ```
 
-### Utility Function
+### Util Function
 
 #### addExcludes
 
@@ -70,8 +95,52 @@ Used to specify which files `sass-loader` does not compile, You can pass in one
 ```js
 export default {
   tools: {
-    sass(config, { addExcludes }) {
-      addExcludes(/node_modules/);
+    sass: {
+      sassLoaderOptions(config, { addExcludes }) {
+        addExcludes(/node_modules/);
+      },
+    },
+  },
+};
+```
+
+The plugin's `exclude` option is the recommended equivalent:
+
+```js
+export default {
+  tools: {
+    sass: {
+      exclude: /node_modules/,
+    },
+  },
+};
+```
+
+### Legacy form
+
+:::warning Do not mix the two layers
+As soon as an object contains a plugin-level key (`sassLoaderOptions`, `include`, `exclude`, ...), the whole object is parsed as plugin options and any loader option in it has no effect. For example, `sassOptions` in `tools.sass: { rewriteUrls: false, sassOptions: { ... } }` is ignored and must be moved under `sassLoaderOptions`; a hint is printed in development.
+:::
+
+In earlier versions, `tools.sass` took the sass-loader options directly, e.g. `tools.sass: { sassOptions: {} }` or `tools.sass(config, { addExcludes }) {}`. This form still works: Modern.js wraps it into `sassLoaderOptions` and produces exactly the same config as before. A migration hint is printed in development, and the legacy form will be removed in the next major version.
+
+```js
+// legacy
+export default {
+  tools: {
+    sass: {
+      sourceMap: true,
+    },
+  },
+};
+
+// current
+export default {
+  tools: {
+    sass: {
+      sassLoaderOptions: {
+        sourceMap: true,
+      },
     },
   },
 };

package/docs/configure/app/tools/svgr.md

@@ -0,0 +1,89 @@
+# tools.svgr
+
+- **Type:** `Object | Function | false`
+- **Default:**
+
+```js
+const defaultOptions = {
+  mixedImport: true,
+  svgrOptions: {
+    exportType: 'named',
+  },
+};
+```
+
+`tools.svgr` modifies the options of [@rsbuild/plugin-svgr](https://rsbuild.rs/plugins/list/plugin-svgr). It accepts the full plugin options. Set it to `false` to skip registering the SVGR plugin; all `.svg` files are then treated as static assets.
+
+| Option            | Description                                                                                                |
+| ----------------- | ---------------------------------------------------------------------------------------------------------- |
+| `svgrOptions`     | Options passed to [SVGR](https://react-svgr.com/docs/options/), such as `exportType`, `icon`, `svgoConfig` |
+| `parallel`        | Whether to transform SVG files in worker threads, defaults to `false`                                      |
+| `exclude`         | SVG files that SVGR should skip                                                                            |
+| `excludeImporter` | Importer files whose SVG imports should skip SVGR                                                          |
+| `query`           | Query that triggers the SVGR transform, defaults to `/react/`                                              |
+| `mixedImport`     | Whether a module may import both the URL and the React component, defaults to `true`                       |
+
+### Merge rules
+
+When `tools.svgr` is an `Object`, its top-level fields are merged with the defaults through Object.assign in a shallow way, and `svgrOptions` is merged one level deeper, so setting only `svgrOptions.icon` keeps the default `exportType`.
+
+When `tools.svgr` is a `Function`, the default config is passed as the first parameter, which can be directly modified or returned as the final result. An array of objects and functions is also accepted and applied in order.
+
+### Parallel transform
+
+The SVGR transform is pure JavaScript and runs on the Node.js main thread by default. With many SVG files, enable `parallel` to move the transform into a pool of worker threads:
+
+```js
+export default {
+  tools: {
+    svgr: {
+      parallel: true,
+    },
+  },
+};
+```
+
+:::tip
+Options sent to worker threads must satisfy the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). With `parallel` enabled, `svgrOptions` therefore cannot contain functions.
+:::
+
+### Changing the default export
+
+`svgrOptions.exportType` controls what an SVG file exports by default: `'named'` exports the file URL by default and the React component as the named export `ReactComponent`; `'default'` exports the React component by default.
+
+```js
+export default {
+  tools: {
+    svgr: {
+      svgrOptions: {
+        exportType: 'default',
+      },
+    },
+  },
+};
+```
+
+### Disabling SVGR
+
+If you are sure that no SVG asset in your project is used as a React component, disable SVGR to improve build performance:
+
+```js
+export default {
+  tools: {
+    svgr: false,
+  },
+};
+```
+
+### Relation to the legacy options
+
+`tools.svgr` replaces the two deprecated options below. They still work today and will be removed in the next major version:
+
+| Legacy option                          | Replacement                                              |
+| -------------------------------------- | -------------------------------------------------------- |
+| `output.svgDefaultExport: 'component'` | `tools.svgr: { svgrOptions: { exportType: 'default' } }` |
+| `output.svgDefaultExport: 'url'`       | `tools.svgr: { svgrOptions: { exportType: 'named' } }`   |
+| `output.disableSvgr: true`             | `tools.svgr: false`                                      |
+| `output.disableSvgr: false`            | Default behavior, just remove it                         |
+
+When both are set, `tools.svgr` wins: once `tools.svgr` is set explicitly, `output.disableSvgr` no longer applies, and `tools.svgr.svgrOptions.exportType` overrides the value derived from `output.svgDefaultExport`.

package/docs/guides/basic-features/static-assets/svg-assets.md

@@ -38,16 +38,22 @@ export default () => <Logo />;
 
 ## Modify the Default Export
 
-You can modify the default export of SVG files through the [output.svgDefaultExport](/configure/app/output/svg-default-export.md) config. For example, set the default export as a React component:
+You can modify the default export of SVG files through `svgrOptions.exportType` of [tools.svgr](/configure/app/tools/svgr.md). For example, set the default export as a React component:
 
 ```ts
 export default {
-  output: {
-    svgDefaultExport: 'component',
+  tools: {
+    svgr: {
+      svgrOptions: {
+        exportType: 'default',
+      },
+    },
   },
 };
 ```
 
+The legacy [output.svgDefaultExport](/configure/app/output/svg-default-export.md) config still works but is deprecated.
+
 Then import the SVG, you'll get a React component instead of a URL:
 
 ```tsx title="src/component/Logo.tsx"
@@ -74,12 +80,12 @@ Please read the [Import Static Assets](/guides/basic-features/static-assets.md)
 
 ## Disable SVGR Processing
 
-By default, when an SVG resource is referenced in a JS file, Modern.js will call SVGR to convert the SVG into a React component. If you are sure that all SVG resources in your project are not being used as React components, you can turn off this conversion by setting [disableSvgr](/configure/app/output/disable-svgr.md) to true to improve build performance.
+By default, when an SVG resource is referenced in a JS file, Modern.js will call SVGR to convert the SVG into a React component. If you are sure that all SVG resources in your project are not being used as React components, you can turn off this conversion by setting [tools.svgr](/configure/app/tools/svgr.md) to `false` to improve build performance.
 
 ```js
 export default {
-  output: {
-    disableSvgr: true,
+  tools: {
+    svgr: false,
   },
 };
 ```
@@ -147,21 +153,27 @@ When SVGR is enabled, its default configuration is as follows:
 }
 ```
 
-If you need to modify the SVGR configuration, you can do the following:
+To modify the SVGR configuration, use `svgrOptions` of [tools.svgr](/configure/app/tools/svgr.md). The `svgoConfig.plugins` you pass are deep merged with the defaults by plugin name, so only the changed part needs to be written:
 
 ```js
 export default {
   tools: {
-    bundlerChain: (chain, { CHAIN_ID }) => {
-      chain.module
-        .rule(CHAIN_ID.RULE.SVG)
-        .oneOf(CHAIN_ID.ONE_OF.SVG)
-        .use(CHAIN_ID.USE.SVGR)
-        .tap(options => {
-          // modify svgoConfig
-          options.svgoConfig.plugins[0].params.overrides.removeUselessDefs = false;
-          return options;
-        });
+    svgr: {
+      svgrOptions: {
+        svgoConfig: {
+          plugins: [
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  // add one more override on top of the default preset-default
+                  removeUselessDefs: false,
+                },
+              },
+            },
+          ],
+        },
+      },
     },
   },
 };

package/docs/llms.txt

@@ -128,13 +128,14 @@
 - [cssLoader](/configure/app/tools/css-loader.md): Type: Object | FunctionDefault: The config of css-loader can be modified through tools.cssLoader.
 - [devServer](/configure/app/tools/dev-server.md): Type: ObjectDefault: {} The config of DevServer can be modified through tools.devServer. Options compress Type: booleanDefault: true Whether to enable gzip compression for served static assets. If you want to disable the gzip compression, you can set compress to false: headers Type: Record<string, string>Default: undefined Adds headers to all responses. historyApiFallback Type: boolean | ConnectHistoryApiFallbackOptionsDefault: false The index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true: For more options and information, see the connect-history-api-fallback documentation. proxy Type: ProxyOptions[] | Record<string, string | ProxyOptions>Default: undefined Configure proxy rules for the dev server, and forward requests to the specified service. watch Type: booleanDefault: true Whether to watch files change in directories such as mock/, server/, api/.
 - [htmlPlugin](/configure/app/tools/html-plugin.md): Type: boolean | Object | FunctionDefault: The configs of html-rspack-plugin can be modified through tools.htmlPlugin.
-- [less](/configure/app/tools/less.md): Type: Object | FunctionDefault: You can modify the config of less-loader via tools.less. Object Type When tools.less is configured as Object type, it is merged with the default config through Object.assign in a shallow way. It should be noted that lessOptions is merged through deepMerge in a deep way. For example: Function Type When tools.less is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For example: Modifying Less Version In some scenarios, if you need to use a specific version of Less instead of the built-in Less v4 in Modern.js, you can install the desired Less version in your project and set it up using the implementation option of the less-loader. Util Function addExcludes Type: (excludes: RegExp | RegExp[]) => void Used to specify which files less-loader does not compile, You can pass in one or more regular expressions to match the path of less files, for example:
+- [less](/configure/app/tools/less.md): Type: Object | FunctionDefault: tools.less modifies the options of @rsbuild/plugin-less. It accepts the full plugin options: Modifying less-loader options When lessLoaderOptions is an Object, it is merged with the default config through Object.assign in a shallow way. It should be noted that lessOptions is merged through deepMerge in a deep way. For example: When lessLoaderOptions is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For example: Parallel compilation Less compilation is pure JavaScript and runs on the Node.js main thread by default. With parallel enabled, Less modules are compiled in a pool of worker threads, which shortens the build when a project has many Less files. Modifying Less Version In some scenarios, if you need to use a specific version of Less instead of the built-in Less v4 in Modern.js, you can install the desired Less version in your project and set it up using the implementation option of the less-loader. Util Function addExcludes Type: (excludes: RegExp | RegExp[]) => void Used to specify which files less-loader does not compile, You can pass in one or more regular expressions to match the path of less files, for example: The plugin's exclude option is the recommended equivalent: Legacy form In earlier versions, tools.less took the less-loader options directly, e.g. tools.less: { lessOptions: {} } or tools.less(config, { addExcludes }) {}. This form still works: Modern.js wraps it into lessLoaderOptions and produces exactly the same config as before. A migration hint is printed in development, and the legacy form will be removed in the next major version.
 - [lightningcssLoader](/configure/app/tools/lightningcss-loader.md): Type: Rspack.LightningcssLoaderOptions | Function | booleanDefault: Rspack.LightningcssLoaderOptions | Function | boolean You can configure builtin:lightningcss-loader through tools.lightningcssLoader.
 - [minifyCss](/configure/app/tools/minify-css.md): Type: Object | Function | undefinedDefault: When building for production, Modern.js will minimize the CSS code through css-minimizer-webpack-plugin. The config of css-minimizer-webpack-plugin can be modified via tools.minifyCss. Object Type When tools.minifyCss is Object type, it will be merged with the default config via Object.assign. For example, modify the preset config of cssnano: Function Type When tools.minifyCss is Function type, the default config is passed in as the first parameter, the config object can be modified directly, or a value can be returned as the final result.
 - [postcss](/configure/app/tools/postcss.md): Type: Object | FunctionDefault: Modern.js integrates PostCSS by default, you can configure postcss-loader through tools.postcss. It should be noted that when you enable the tools.lightningcss configuration, PostCSS will be disabled by default, including postcss-loader and its default plugins.
 - [rspack](/configure/app/tools/rspack.md): Type: Rspack.Configuration | Function | undefinedDefault: undefined tools.rspack is used to configure Rspack.
-- [sass](/configure/app/tools/sass.md): Type: Object | FunctionDefault: You can modify the config of sass-loader via tools.sass. Object Type When tools.sass is Object type, it is merged with the default config through Object.assign. It should be noted that sassOptions is merged through deepMerge in a deep way. For example: Function Type When tools.sass is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For Example: Modifying Sass Version In some scenarios, if you need to use a specific version of Sass instead of the built-in Dart Sass v1 in Modern.js, you can install the desired Sass version in your project and set it up using the implementation option of the sass-loader. Utility Function addExcludes Type: (excludes: RegExp | RegExp[]) => void Used to specify which files sass-loader does not compile, You can pass in one or more regular expressions to match the path of sass files, for example:
+- [sass](/configure/app/tools/sass.md): Type: Object | FunctionDefault: tools.sass modifies the options of @rsbuild/plugin-sass. It accepts the full plugin options: Modifying sass-loader options When sassLoaderOptions is an Object, it is merged with the default config through Object.assign in a shallow way. It should be noted that sassOptions is merged through deepMerge in a deep way. For example: When sassLoaderOptions is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For example: Disabling URL rewriting By default, relative URLs in Sass files are rewritten by resolve-url-loader so that they resolve relative to the source file. If your project does not rely on this, turn it off to drop one loader from the chain: Modifying Sass Version In some scenarios, if you need to use a specific version of Sass instead of the built-in Dart Sass v1 in Modern.js, you can install the desired Sass version in your project and set it up using the implementation option of the sass-loader. Util Function addExcludes Type: (excludes: RegExp | RegExp[]) => void Used to specify which files sass-loader does not compile, You can pass in one or more regular expressions to match the path of sass files, for example: The plugin's exclude option is the recommended equivalent: Legacy form In earlier versions, tools.sass took the sass-loader options directly, e.g. tools.sass: { sassOptions: {} } or tools.sass(config, { addExcludes }) {}. This form still works: Modern.js wraps it into sassLoaderOptions and produces exactly the same config as before. A migration hint is printed in development, and the legacy form will be removed in the next major version.
 - [styleLoader](/configure/app/tools/style-loader.md): Type: Object | FunctionDefault: {} The config of style-loader can be set through tools.styleLoader.
+- [svgr](/configure/app/tools/svgr.md): Type: Object | Function | falseDefault: tools.svgr modifies the options of @rsbuild/plugin-svgr. It accepts the full plugin options. Set it to false to skip registering the SVGR plugin; all .svg files are then treated as static assets. Merge rules When tools.svgr is an Object, its top-level fields are merged with the defaults through Object.assign in a shallow way, and svgrOptions is merged one level deeper, so setting only svgrOptions.icon keeps the default exportType. When tools.svgr is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. An array of objects and functions is also accepted and applied in order. Parallel transform The SVGR transform is pure JavaScript and runs on the Node.js main thread by default. With many SVG files, enable parallel to move the transform into a pool of worker threads: Changing the default export svgrOptions.exportType controls what an SVG file exports by default: 'named' exports the file URL by default and the React component as the named export ReactComponent; 'default' exports the React component by default. Disabling SVGR If you are sure that no SVG asset in your project is used as a React component, disable SVGR to improve build performance: Relation to the legacy options tools.svgr replaces the two deprecated options below. They still work today and will be removed in the next major version: When both are set, tools.svgr wins: once tools.svgr is set explicitly, output.disableSvgr no longer applies, and tools.svgr.svgrOptions.exportType overrides the value derived from output.svgDefaultExport.
 - [swc](/configure/app/tools/swc.md): Type: Object | FunctionDefault: undefined
 - [tsChecker](/configure/app/tools/ts-checker.md): Type: Object | FunctionDefault: By default, the @rsbuild/plugin-type-check is enabled for type checking. You can use output.disableTsChecker config to disable it.
 - [aliasStrategy](/configure/app/source/alias-strategy.md): Type: 'prefer-tsconfig' | 'prefer-alias'Default: 'prefer-tsconfig' source.aliasStrategy is used to control the priority between the paths option in tsconfig.json and the alias option in the bundler.