From d81d3612929cc6ae489acb27994622d9ba86f1de Mon Sep 17 00:00:00 2001 From: GRAMMAC Date: Mon, 23 Jun 2025 16:44:59 +0800 Subject: [PATCH 1/3] docs(svelte): add less alias import solution --- .../docs/en/plugins/list/plugin-svelte.mdx | 36 +++++++++++++++++++ .../docs/zh/plugins/list/plugin-svelte.mdx | 36 +++++++++++++++++++ 2 files changed, 72 insertions(+) diff --git a/website/docs/en/plugins/list/plugin-svelte.mdx b/website/docs/en/plugins/list/plugin-svelte.mdx index fc66430b04..159ccdc434 100644 --- a/website/docs/en/plugins/list/plugin-svelte.mdx +++ b/website/docs/en/plugins/list/plugin-svelte.mdx @@ -106,3 +106,39 @@ pluginSvelte({ ## Notes Currently, `svelte-loader` does not support HMR for Svelte v5, see [svelte-loader - Hot Reload](https://github.com/sveltejs/svelte-loader?tab=readme-ov-file#hot-reload). + +### Alias handling in LESS/SCSS + +When using aliases to import Less or SCSS files within Svelte components, you need to manually configure the preprocessor to handle alias resolution. Otherwise, you may encounter `"file not found"` errors. + +**Example:** + +```ts title="rsbuild.config.ts" +import { pluginSvelte } from '@rsbuild/plugin-svelte'; + +export default { + plugins: [ + pluginSvelte({ + preprocessOptions: { + scss: { + importer: [ + // Handle alias imports for SCSS files + (url, prev) => { + if (url.startsWith('@/')) { + return { file: url.replace('@/', 'src/') }; + } + return null; + }, + ], + }, + less: { + // use less preprocessing to handle alias imports + plugins: [], + }, + }, + }), + ], +}; +``` + +This ensures that alias imports like `@import '@/styles/variables.scss'` or `@import '@/styles/variables.less'` are properly resolved within Svelte components. diff --git a/website/docs/zh/plugins/list/plugin-svelte.mdx b/website/docs/zh/plugins/list/plugin-svelte.mdx index ca1a65e8a6..6f9a4375bc 100644 --- a/website/docs/zh/plugins/list/plugin-svelte.mdx +++ b/website/docs/zh/plugins/list/plugin-svelte.mdx @@ -106,3 +106,39 @@ pluginSvelte({ ## 注意事项 目前 `svelte-loader` 暂不支持 Svelte v5 热更新，详见 [svelte-loader - Hot Reload](https://github.com/sveltejs/svelte-loader?tab=readme-ov-file#hot-reload)。 + +### LESS/SCSS 中的别名处理 + +在 Svelte 组件中使用别名引入 LESS/SCSS 文件时，需要手动处理别名的路径解析，否则会出现 `"file not found"` 的错误。 + +**示例：** + +```ts title="rsbuild.config.ts" +import { pluginSvelte } from '@rsbuild/plugin-svelte'; + +export default { + plugins: [ + pluginSvelte({ + preprocessOptions: { + scss: { + importer: [ + // 处理 SCSS 文件的别名导入 + (url, prev) => { + if (url.startsWith('@/')) { + return { file: url.replace('@/', 'src/') }; + } + return null; + }, + ], + }, + less: { + // 使用 less preprocessing 来处理别名导入 + plugins: [], + }, + }, + }), + ], +}; +``` + +通过配置 `preprocessor` 可以保证在 Svelte 组件中引入的 `@import '@/styles/variables.scss` 或者 `@import '@/styles/variables.less'` 能够正确解析。 From 3d9e26a69a5237c5c2d0bc677f71fdab747ddac2 Mon Sep 17 00:00:00 2001 From: GRAMMAC Date: Mon, 23 Jun 2025 16:58:07 +0800 Subject: [PATCH 2/3] docs: keep consistent with config names --- website/docs/zh/plugins/list/plugin-svelte.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/zh/plugins/list/plugin-svelte.mdx b/website/docs/zh/plugins/list/plugin-svelte.mdx index 6f9a4375bc..8cb7198082 100644 --- a/website/docs/zh/plugins/list/plugin-svelte.mdx +++ b/website/docs/zh/plugins/list/plugin-svelte.mdx @@ -141,4 +141,4 @@ export default { }; ``` -通过配置 `preprocessor` 可以保证在 Svelte 组件中引入的 `@import '@/styles/variables.scss` 或者 `@import '@/styles/variables.less'` 能够正确解析。 +通过配置 `preprocessOptions` 可以保证在 Svelte 组件中引入的 `@import '@/styles/variables.scss` 或者 `@import '@/styles/variables.less'` 能够正确解析。 From fbbac4b42c4ee71a4461782f4e0f0cb957232f94 Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 23 Jun 2025 17:51:34 +0800 Subject: [PATCH 3/3] Apply suggestions from code review --- website/docs/en/plugins/list/plugin-svelte.mdx | 6 +++--- website/docs/zh/plugins/list/plugin-svelte.mdx | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/website/docs/en/plugins/list/plugin-svelte.mdx b/website/docs/en/plugins/list/plugin-svelte.mdx index 159ccdc434..adc2119875 100644 --- a/website/docs/en/plugins/list/plugin-svelte.mdx +++ b/website/docs/en/plugins/list/plugin-svelte.mdx @@ -107,11 +107,11 @@ pluginSvelte({ Currently, `svelte-loader` does not support HMR for Svelte v5, see [svelte-loader - Hot Reload](https://github.com/sveltejs/svelte-loader?tab=readme-ov-file#hot-reload). -### Alias handling in LESS/SCSS +### Alias handling in Less/Sass -When using aliases to import Less or SCSS files within Svelte components, you need to manually configure the preprocessor to handle alias resolution. Otherwise, you may encounter `"file not found"` errors. +When using aliases to import Less or Sass files within Svelte components, you need to manually configure the preprocessor to handle alias resolution. Otherwise, you may encounter `"file not found"` errors. -**Example:** +- **Example:** ```ts title="rsbuild.config.ts" import { pluginSvelte } from '@rsbuild/plugin-svelte'; diff --git a/website/docs/zh/plugins/list/plugin-svelte.mdx b/website/docs/zh/plugins/list/plugin-svelte.mdx index 8cb7198082..ce1a76cb5a 100644 --- a/website/docs/zh/plugins/list/plugin-svelte.mdx +++ b/website/docs/zh/plugins/list/plugin-svelte.mdx @@ -107,11 +107,11 @@ pluginSvelte({ 目前 `svelte-loader` 暂不支持 Svelte v5 热更新，详见 [svelte-loader - Hot Reload](https://github.com/sveltejs/svelte-loader?tab=readme-ov-file#hot-reload)。 -### LESS/SCSS 中的别名处理 +### Less/Sass 中的别名处理 -在 Svelte 组件中使用别名引入 LESS/SCSS 文件时，需要手动处理别名的路径解析，否则会出现 `"file not found"` 的错误。 +在 Svelte 组件中使用别名来引入 Less 或 Sass 文件时，需要手动处理别名的路径解析，否则会出现 `"file not found"` 的错误。 -**示例：** +- **示例：** ```ts title="rsbuild.config.ts" import { pluginSvelte } from '@rsbuild/plugin-svelte'; @@ -141,4 +141,4 @@ export default { }; ``` -通过配置 `preprocessOptions` 可以保证在 Svelte 组件中引入的 `@import '@/styles/variables.scss` 或者 `@import '@/styles/variables.less'` 能够正确解析。 +通过配置 `preprocessOptions`，可以保证在 Svelte 组件中引入的 `@import '@/styles/variables.scss` 或者 `@import '@/styles/variables.less'` 能够被正确解析。