fix!: remove the builtin Sass and Less plugins (#1937)

Author: chenjiahan

e2e/fixtures/modern-js/modern.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, moduleTools } from '@modern-js/module-tools';
+import { pluginSass } from '@rsbuild/plugin-sass';
 import { modulePluginDoc } from '@rspress/modern-js-plugin';
 
 export default defineConfig({
@@ -15,6 +16,7 @@ export default defineConfig({
       apiParseTool: 'react-docgen-typescript',
       doc: {
         lang: 'en',
+        builderPlugins: [pluginSass()],
         locales: [
           {
             lang: 'en',

e2e/fixtures/modern-js/package.json

@@ -27,6 +27,7 @@
   "devDependencies": {
     "@modern-js/module-tools": "2.64.0",
     "@modern-js/tsconfig": "2.64.0",
+    "@rsbuild/plugin-sass": "~1.2.2",
     "@rspress/modern-js-plugin": "workspace:*",
     "@types/node": "^18.11.17",
     "@types/react": "^18.3.18",

e2e/fixtures/modern-js/src/alert.tsx

@@ -1,5 +1,5 @@
 import { Alert } from '@arco-design/web-react';
-import '@arco-design/web-react/es/Alert/style';
+import '@arco-design/web-react/es/Alert/style/css';
 
 export type AlertProps = {
   /**

e2e/fixtures/modern-js/src/button.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@arco-design/web-react';
-import '@arco-design/web-react/es/Button/style';
+import '@arco-design/web-react/es/Button/style/css';
 
 export type ButtonProps = {
   /**

packages/core/package.json

@@ -51,9 +51,7 @@
     "@mdx-js/mdx": "2.3.0",
     "@mdx-js/react": "2.3.0",
     "@rsbuild/core": "1.2.16",
-    "@rsbuild/plugin-less": "~1.1.1",
     "@rsbuild/plugin-react": "~1.1.1",
-    "@rsbuild/plugin-sass": "~1.2.2",
     "@rspress/mdx-rs": "0.6.6",
     "@rspress/plugin-auto-nav-sidebar": "workspace:*",
     "@rspress/plugin-container-syntax": "workspace:*",

packages/core/src/node/initRsbuild.ts

@@ -5,9 +5,7 @@ import type {
   RsbuildInstance,
   RsbuildPlugin,
 } from '@rsbuild/core';
-import { PLUGIN_LESS_NAME, pluginLess } from '@rsbuild/plugin-less';
 import { PLUGIN_REACT_NAME, pluginReact } from '@rsbuild/plugin-react';
-import { PLUGIN_SASS_NAME, pluginSass } from '@rsbuild/plugin-sass';
 import {
   MDX_OR_MD_REGEXP,
   RSPRESS_TEMP_DIR,
@@ -100,8 +98,6 @@ async function createInternalBuildConfig(
   return {
     plugins: [
       ...(isPluginIncluded(config, PLUGIN_REACT_NAME) ? [] : [pluginReact()]),
-      ...(isPluginIncluded(config, PLUGIN_SASS_NAME) ? [] : [pluginSass()]),
-      ...(isPluginIncluded(config, PLUGIN_LESS_NAME) ? [] : [pluginLess()]),
       rsbuildPluginDocVM({
         userDocRoot,
         config,

packages/document/docs/en/api/config/config-build.mdx

@@ -94,22 +94,18 @@ 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.
+You can also override the built-in plugin [@rsbuild/plugin-react](https://rsbuild.dev/plugins/list/plugin-react) and customize the plugin options.
 
-- Example: Modify related options of built-in [@rsbuild/plugin-less](https://rsbuild.dev/plugins/list/plugin-less) plugin.
+For example:
 
 ```ts title="rspress.config.ts"
 import { defineConfig } from 'rspress/config';
-import { pluginLess } from '@rsbuild/plugin-less';
+import { pluginReact } from '@rsbuild/plugin-react';
 
 export default defineConfig({
   builderPlugins: [
-    pluginLess({
-      lessLoaderOptions: {
-        lessOptions: {
-          math: 'always',
-        },
-      },
+    pluginReact({
+      // ...options
     }),
   ],
 });

packages/document/docs/zh/api/config/config-build.mdx

@@ -94,22 +94,18 @@ 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-react](https://rsbuild.dev/zh/plugins/list/plugin-react) 并自定义插件的选项。
 
-- 示例：修改内置的 [@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';
+import { pluginReact } from '@rsbuild/plugin-react';
 
 export default defineConfig({
   builderPlugins: [
-    pluginLess({
-      lessLoaderOptions: {
-        lessOptions: {
-          math: 'always',
-        },
-      },
+    pluginReact({
+      // ...options
     }),
   ],
 });

packages/document/package.json

@@ -16,6 +16,7 @@
     "preview": "rspress preview"
   },
   "devDependencies": {
+    "@rsbuild/plugin-sass": "~1.2.2",
     "@rspress/plugin-algolia": "workspace:*",
     "@rstack-dev/doc-ui": "1.6.0",
     "@types/react": "^18.3.18",

packages/document/rspress.config.ts

@@ -1,3 +1,4 @@
+import { pluginSass } from '@rsbuild/plugin-sass';
 import { pluginAlgolia } from '@rspress/plugin-algolia';
 import { pluginGoogleAnalytics } from 'rsbuild-plugin-google-analytics';
 import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';
@@ -33,6 +34,7 @@ export default defineConfig({
       lazyCompilation: true,
     },
     plugins: [
+      pluginSass(),
       pluginGoogleAnalytics({ id: 'G-66B2Z6KG0J' }),
       pluginOpenGraph({
         title: 'Rspress',