diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index ad46e5ba738f37..d107b13ed60017 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -1493,7 +1493,7 @@ const scss: SassStylePreprocessor = async (
const internalImporter: Sass.Importer = (url, importer, done) => {
resolvers.sass(url, importer).then((resolved) => {
if (resolved) {
- rebaseUrls(resolved, options.filename, options.alias)
+ rebaseUrls(resolved, options.filename, options.alias, '$')
.then((data) => done?.(data))
.catch((data) => done?.(data))
} else {
@@ -1577,7 +1577,8 @@ const sass: SassStylePreprocessor = (source, root, options, aliasResolver) =>
async function rebaseUrls(
file: string,
rootFile: string,
- alias: Alias[]
+ alias: Alias[],
+ variablePrefix: string
): PromiseCSS
contains alias
@import from SASS _partial: This should be orchid
+url starts with variable
Imported SASS string:
@@ -46,6 +47,7 @@
url starts with variable
Imported Less string:
diff --git a/playground/css/less.less b/playground/css/less.less index 49cbd3c3bb336e..f5f6fa52b36740 100644 --- a/playground/css/less.less +++ b/playground/css/less.less @@ -1,4 +1,4 @@ -@import '@/nested/nested'; +@import '=/nested/nested'; @import './nested/css-in-less.less'; // Test data-uri calls with relative images. diff --git a/playground/css/linked.css b/playground/css/linked.css index ff38b8bc9345ba..55b11f672fc500 100644 --- a/playground/css/linked.css +++ b/playground/css/linked.css @@ -1,4 +1,4 @@ -@import '@/linked-at-import.css'; +@import '=/linked-at-import.css'; /* test postcss nesting */ .wrapper { diff --git a/playground/css/nested/_index.scss b/playground/css/nested/_index.scss index 48d630b573ae1b..fee2eb88b168f2 100644 --- a/playground/css/nested/_index.scss +++ b/playground/css/nested/_index.scss @@ -7,5 +7,11 @@ .sass-at-import-alias { color: olive; - background: url(@/nested/icon.png) 10px no-repeat; + background: url(=/nested/icon.png) 10px no-repeat; +} + +$var: '/ok.png'; +.sass-url-starts-with-variable { + background: url($var); + background-position: center; } diff --git a/playground/css/nested/nested.less b/playground/css/nested/nested.less index e4ce110ab73679..25aa1944d32c14 100644 --- a/playground/css/nested/nested.less +++ b/playground/css/nested/nested.less @@ -5,5 +5,11 @@ .less-at-import-alias { color: darkslateblue; - background: url(@/nested/icon.png) 10px no-repeat; + background: url(=/nested/icon.png) 10px no-repeat; +} + +@var: '/ok.png'; +.less-url-starts-with-variable { + background: url('@{var}'); + background-position: center; } diff --git a/playground/css/nested/nested.sss b/playground/css/nested/nested.sss index 2de4c96564a100..9dc685cb3e50c3 100644 --- a/playground/css/nested/nested.sss +++ b/playground/css/nested/nested.sss @@ -5,4 +5,4 @@ .sugarss-at-import-alias color: darkslateblue - background: url(@/nested/icon.png) 10px no-repeat + background: url(=/nested/icon.png) 10px no-repeat diff --git a/playground/css/nested/nested.styl b/playground/css/nested/nested.styl index 72e6f7a5074685..8a371948538de0 100644 --- a/playground/css/nested/nested.styl +++ b/playground/css/nested/nested.styl @@ -3,4 +3,4 @@ .stylus-import-alias color darkslateblue - background url('@/nested/icon.png') 10px no-repeat + background url('=/nested/icon.png') 10px no-repeat diff --git a/playground/css/sass.scss b/playground/css/sass.scss index 1db47622b016ad..721e6b9bfbca6c 100644 --- a/playground/css/sass.scss +++ b/playground/css/sass.scss @@ -1,9 +1,9 @@ -@import '@/nested'; // alias + custom index resolving -> /nested/_index.scss -@import '@/nested/partial'; // sass convention: omitting leading _ for partials +@import '=/nested'; // alias + custom index resolving -> /nested/_index.scss +@import '=/nested/partial'; // sass convention: omitting leading _ for partials @import 'css-dep'; // package w/ sass entry points @import 'virtual-dep'; // virtual file added through importer -@import '@/pkg-dep'; // package w/out sass field -@import '@/weapp.wxss'; // wxss file +@import '=/pkg-dep'; // package w/out sass field +@import '=/weapp.wxss'; // wxss file .sass { /* injected via vite.config.js */ diff --git a/playground/css/sugarss.sss b/playground/css/sugarss.sss index cd393b10519041..80cfc3861b9417 100644 --- a/playground/css/sugarss.sss +++ b/playground/css/sugarss.sss @@ -1,4 +1,4 @@ -@import '@/nested/nested.sss' +@import '=/nested/nested.sss' .sugarss color: blue diff --git a/playground/css/vite.config.js b/playground/css/vite.config.js index 221c2a75187f35..40ca1a186e58da 100644 --- a/playground/css/vite.config.js +++ b/playground/css/vite.config.js @@ -14,7 +14,7 @@ module.exports = { }, resolve: { alias: { - '@': __dirname, + '=': __dirname, spacefolder: __dirname + '/folder with space', '#alias': __dirname + '/aliased/foo.css', '#alias-module': __dirname + '/aliased/bar.module.css'