diff --git a/website/docs/en/plugins/list/plugin-sass.mdx b/website/docs/en/plugins/list/plugin-sass.mdx index 039b1c9e1d..be4524c7fd 100644 --- a/website/docs/en/plugins/list/plugin-sass.mdx +++ b/website/docs/en/plugins/list/plugin-sass.mdx @@ -106,3 +106,22 @@ pluginSass({ }, }); ``` + +```ts +pluginSass({ + sassLoaderOptions: { + implementation: require.resolve('sass'), + }, +}); +``` + +Rsbuild defaults to using the latest `modern-compiler` API. If you are using an older version of Sass, please set the [api](https://github.com/webpack-contrib/sass-loader?tab=readme-ov-file#api) option of sass-loader to `legacy` to avoid exceptions caused by version mismatches. + +```ts +pluginSass({ + sassLoaderOptions: { + api: 'legacy', + implementation: require.resolve('sass'), + }, +}); +``` diff --git a/website/docs/zh/plugins/list/plugin-sass.mdx b/website/docs/zh/plugins/list/plugin-sass.mdx index d444b2fd9b..165a65fb65 100644 --- a/website/docs/zh/plugins/list/plugin-sass.mdx +++ b/website/docs/zh/plugins/list/plugin-sass.mdx @@ -99,10 +99,21 @@ pluginSass({ 在某些场景下,如果你需要使用特定的 Sass 版本,而不是使用 Rsbuild 内置的 Sass embedded,可以在项目中安装需要使用的 Sass 版本,并通过 `sass-loader` 的 `implementation` 选项设置。 -```js +```ts +pluginSass({ + sassLoaderOptions: { + implementation: require.resolve('sass'), + }, +}); +``` + +Rsbuild 默认使用最新的 `modern-compiler` API,如果你使用的 Sass 版本较低,请将 sass-loader 的 [api](https://github.com/webpack-contrib/sass-loader?tab=readme-ov-file#api) 选项设置为 `legacy`,以避免版本不匹配导致的异常。 + +```ts pluginSass({ sassLoaderOptions: { - implementation: require('sass'), + api: 'legacy', + implementation: require.resolve('sass'), }, }); ```