diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 45af9233bf4560..7c0deb97b338bb 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -626,8 +626,10 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
         (cssResolve = config.createResolver({
           extensions: ['.css'],
           mainFields: ['style'],
+          conditions: ['style'],
           tryIndex: false,
-          preferRelative: true
+          preferRelative: true,
+          isUnsafeExport: true
         }))
       )
     },
@@ -638,9 +640,11 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
         (sassResolve = config.createResolver({
           extensions: ['.scss', '.sass', '.css'],
           mainFields: ['sass', 'style'],
+          conditions: ['sass', 'style'],
           tryIndex: true,
           tryPrefix: '_',
-          preferRelative: true
+          preferRelative: true,
+          isUnsafeExport: true
         }))
       )
     },
@@ -651,8 +655,10 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
         (lessResolve = config.createResolver({
           extensions: ['.less', '.css'],
           mainFields: ['less', 'style'],
+          conditions: ['less', 'style'],
           tryIndex: false,
-          preferRelative: true
+          preferRelative: true,
+          isUnsafeExport: true
         }))
       )
     }
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index 7ccc3a7eb5cb7a..3cf48404c20b98 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -73,6 +73,9 @@ export interface InternalResolveOptions extends ResolveOptions {
   preferRelative?: boolean
   preserveSymlinks?: boolean
   isRequire?: boolean
+  isImport?: boolean
+  // When true, the export resolver should opt out of Node's default resolution conditions
+  isUnsafeExport?: boolean
   // #3040
   // when the importer is a ts module,
   // if the specifier requests a non-existent `.js/jsx/mjs/cjs` file,
@@ -886,7 +889,7 @@ function resolveExports(
   targetWeb: boolean
 ) {
   const conditions = [options.isProduction ? 'production' : 'development']
-  if (!options.isRequire) {
+  if (!options.isRequire && !options.isUnsafeExport) {
     conditions.push('module')
   }
   if (options.conditions) {
@@ -896,6 +899,7 @@ function resolveExports(
   return _resolveExports(pkg, key, {
     browser: targetWeb,
     require: options.isRequire,
+    unsafe: options.isUnsafeExport,
     conditions
   })
 }
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index 564f0665bf0cea..d844ed14cdca99 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -270,6 +270,14 @@ test('@import dependency w/ stylus entry', async () => {
   expect(await getColor('.css-dep-stylus')).toBe('red')
 })
 
+test('@import dependency w/ style export mapping', async () => {
+  expect(await getColor('.css-dep-exports')).toBe('purple')
+})
+
+test('@import dependency w/ sass export mapping', async () => {
+  expect(await getColor('.css-dep-exports-sass')).toBe('orange')
+})
+
 test('@import dependency w/out package scss', async () => {
   expect(await getColor('.sass-dep')).toBe('lavender')
 })
diff --git a/playground/css/css-dep-exports/index.js b/playground/css/css-dep-exports/index.js
new file mode 100644
index 00000000000000..47b55353d03edb
--- /dev/null
+++ b/playground/css/css-dep-exports/index.js
@@ -0,0 +1 @@
+throw new Error('should not be imported')
diff --git a/playground/css/css-dep-exports/package.json b/playground/css/css-dep-exports/package.json
new file mode 100644
index 00000000000000..c510ee029ccb3a
--- /dev/null
+++ b/playground/css/css-dep-exports/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "css-dep-exports",
+  "private": true,
+  "version": "1.0.0",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "sass": "./style.scss",
+      "style": "./style.css"
+    },
+    "./package.json": "./package.json"
+  }
+}
diff --git a/playground/css/css-dep-exports/style.css b/playground/css/css-dep-exports/style.css
new file mode 100644
index 00000000000000..838a8afbe4d435
--- /dev/null
+++ b/playground/css/css-dep-exports/style.css
@@ -0,0 +1,3 @@
+.css-dep-exports {
+  color: purple;
+}
diff --git a/playground/css/css-dep-exports/style.scss b/playground/css/css-dep-exports/style.scss
new file mode 100644
index 00000000000000..37df38d7d49d24
--- /dev/null
+++ b/playground/css/css-dep-exports/style.scss
@@ -0,0 +1,3 @@
+.css-dep-exports-sass {
+  color: orange;
+}
diff --git a/playground/css/dep.css b/playground/css/dep.css
index 8d5b62847cd70e..0abb1afe4428b1 100644
--- a/playground/css/dep.css
+++ b/playground/css/dep.css
@@ -1 +1,2 @@
 @import 'css-dep';
+@import 'css-dep-exports';
diff --git a/playground/css/index.html b/playground/css/index.html
index 4310967b6ca65b..00a21ba4846fab 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -100,13 +100,20 @@ <h1>CSS</h1>
   <pre class="charset-css"></pre>
 
   <p class="css-dep">
-    @import dependency w/ style enrtrypoints: this should be purple
+    @import dependency w/ style entrypoints: this should be purple
   </p>
   <p class="css-dep-sass">
-    @import dependency w/ sass enrtrypoints: this should be orange
+    @import dependency w/ sass entrypoints: this should be orange
   </p>
   <p class="css-dep-stylus">
-    @import dependency w/ styl enrtrypoints: this should be red
+    @import dependency w/ styl entrypoints: this should be red
+  </p>
+
+  <p class="css-dep-exports">
+    @import dependency w/ style export mapping: this should be purple
+  </p>
+  <p class="css-dep-exports-sass">
+    @import dependency w/ sass export mapping: this should be orange
   </p>
 
   <p class="dir-dep">PostCSS dir-dependency: this should be grey</p>
diff --git a/playground/css/sass.scss b/playground/css/sass.scss
index 3c7095418e01e6..41ec4184ba4c1f 100644
--- a/playground/css/sass.scss
+++ b/playground/css/sass.scss
@@ -1,6 +1,7 @@
 @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 'css-dep-exports'; // package with a sass export mapping
 @import 'virtual-dep'; // virtual file added through importer
 @import '@/pkg-dep'; // package w/out sass field