diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts index 5fcad9777ebc26..ad5d9f344813e4 100644 --- a/packages/playground/css/__tests__/css.spec.ts +++ b/packages/playground/css/__tests__/css.spec.ts @@ -240,6 +240,10 @@ test('@import dependency w/ stylus entry', async () => { expect(await getColor('.css-dep-stylus')).toBe('red') }) +test('@import dependency w/out package scss', async () => { + expect(await getColor('.sass-dep')).toBe('lavender') +}) + test('async chunk', async () => { const el = await page.$('.async') expect(await getColor(el)).toBe('teal') diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html index 7b16d95319fd43..7a79bb1629f989 100644 --- a/packages/playground/css/index.html +++ b/packages/playground/css/index.html @@ -28,6 +28,9 @@

CSS

@import from SASS _partial: This should be orchid

Imported SASS string:


+  

+ @import dependency w/ no scss entrypoint: this should be lavender +

Less: This should be blue

diff --git a/packages/playground/css/pkg-dep/_index.scss b/packages/playground/css/pkg-dep/_index.scss new file mode 100644 index 00000000000000..cf8514edadfcf0 --- /dev/null +++ b/packages/playground/css/pkg-dep/_index.scss @@ -0,0 +1,3 @@ +.sass-dep { + color: lavender; +} diff --git a/packages/playground/css/pkg-dep/index.js b/packages/playground/css/pkg-dep/index.js new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/playground/css/pkg-dep/package.json b/packages/playground/css/pkg-dep/package.json new file mode 100644 index 00000000000000..e31c3b33e1e0da --- /dev/null +++ b/packages/playground/css/pkg-dep/package.json @@ -0,0 +1,5 @@ +{ + "name": "dep", + "version": "1.0.0", + "main": "index.js" +} diff --git a/packages/playground/css/sass.scss b/packages/playground/css/sass.scss index 4f49cf4db2c46a..3c7095418e01e6 100644 --- a/packages/playground/css/sass.scss +++ b/packages/playground/css/sass.scss @@ -2,6 +2,7 @@ @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 .sass { /* injected via vite.config.js */ diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts index 15974ecfef7eef..c4c25abffbe000 100644 --- a/packages/vite/src/node/plugins/resolve.ts +++ b/packages/vite/src/node/plugins/resolve.ts @@ -59,6 +59,7 @@ export interface InternalResolveOptions extends ResolveOptions { asSrc?: boolean tryIndex?: boolean tryPrefix?: string + skipPackageJson?: boolean preferRelative?: boolean isRequire?: boolean } @@ -286,7 +287,8 @@ function tryFsResolve( options, false, targetWeb, - options.tryPrefix + options.tryPrefix, + options.skipPackageJson )) ) { return res @@ -300,7 +302,8 @@ function tryFsResolve( options, false, targetWeb, - options.tryPrefix + options.tryPrefix, + options.skipPackageJson )) ) { return res @@ -314,7 +317,8 @@ function tryFsResolve( options, tryIndex, targetWeb, - options.tryPrefix + options.tryPrefix, + options.skipPackageJson )) ) { return res @@ -327,7 +331,8 @@ function tryResolveFile( options: InternalResolveOptions, tryIndex: boolean, targetWeb: boolean, - tryPrefix?: string + tryPrefix?: string, + skipPackageJson?: boolean ): string | undefined { let isReadable = false try { @@ -341,11 +346,13 @@ function tryResolveFile( if (!fs.statSync(file).isDirectory()) { return normalizePath(ensureVolumeInPath(file)) + postfix } else if (tryIndex) { - const pkgPath = file + '/package.json' - if (fs.existsSync(pkgPath)) { - // path points to a node package - const pkg = loadPackageData(pkgPath) - return resolvePackageEntry(file, pkg, options, targetWeb) + if (!skipPackageJson) { + const pkgPath = file + '/package.json' + if (fs.existsSync(pkgPath)) { + // path points to a node package + const pkg = loadPackageData(pkgPath) + return resolvePackageEntry(file, pkg, options, targetWeb) + } } const index = tryFsResolve(file + '/index', options) if (index) return index + postfix @@ -605,6 +612,15 @@ export function resolvePackageEntry( entryPoint = entryPoint || data.main || 'index.js' + // make sure we don't get scripts when looking for sass + if ( + options.mainFields?.[0] === 'sass' && + !options.extensions?.includes(path.extname(entryPoint)) + ) { + entryPoint = '' + options.skipPackageJson = true + } + // resolve object browser field in package.json const { browser: browserField } = data if (targetWeb && isObject(browserField)) {