diff --git a/packages/bundler/src/Bundler.ts b/packages/bundler/src/Bundler.ts
index 1b356c7f..19cd09c4 100644
--- a/packages/bundler/src/Bundler.ts
+++ b/packages/bundler/src/Bundler.ts
@@ -278,44 +278,46 @@ export class Bundler {
 			return contentOptions;
 		};
 
-		if (this.cssVarsDirPath) {
-			this.dumpVariablesIntoFile({
-				filePath: this.cssVarsDirPath,
-				fileType: 'css',
-				variablePrefix: '--',
-				variableValueSeparator: ': ',
-				afterValue: ';',
-				fileContentPrefix: ':root {\n',
-				fileContentSuffix: '\n}'
-			});
-		}
+		if (this.compilerConfig.variables) {
+			if (this.cssVarsDirPath) {
+				this.dumpVariablesIntoFile({
+					filePath: this.cssVarsDirPath,
+					fileType: 'css',
+					variablePrefix: '--',
+					variableValueSeparator: ': ',
+					afterValue: ';',
+					fileContentPrefix: ':root {\n',
+					fileContentSuffix: '\n}'
+				});
+			}
 
-		if (this.sassVarsDirPath) {
-			this.dumpVariablesIntoFile({
-				filePath: this.sassVarsDirPath,
-				fileType: 'scss',
-				variablePrefix: '$',
-				variableValueSeparator: ': ',
-				afterValue: ';'
-			});
-		}
+			if (this.sassVarsDirPath) {
+				this.dumpVariablesIntoFile({
+					filePath: this.sassVarsDirPath,
+					fileType: 'scss',
+					variablePrefix: '$',
+					variableValueSeparator: ': ',
+					afterValue: ';'
+				});
+			}
 
-		if (this.lessVarsDirPath) {
-			this.dumpVariablesIntoFile({
-				filePath: this.lessVarsDirPath,
-				fileType: 'less',
-				variablePrefix: '@',
-				variableValueSeparator: ': '
-			});
-		}
+			if (this.lessVarsDirPath) {
+				this.dumpVariablesIntoFile({
+					filePath: this.lessVarsDirPath,
+					fileType: 'less',
+					variablePrefix: '@',
+					variableValueSeparator: ': '
+				});
+			}
 
-		if (this.stylusVarsDirPath) {
-			this.dumpVariablesIntoFile({
-				filePath: this.stylusVarsDirPath,
-				fileType: 'styl',
-				variablePrefix: '',
-				variableValueSeparator: ' = '
-			});
+			if (this.stylusVarsDirPath) {
+				this.dumpVariablesIntoFile({
+					filePath: this.stylusVarsDirPath,
+					fileType: 'styl',
+					variablePrefix: '',
+					variableValueSeparator: ' = '
+				});
+			}
 		}
 
 		this.configurationLoadingPromise = null;
diff --git a/packages/nuxt-module/playground/stylify.config.ts b/packages/nuxt-module/playground/stylify.config.ts
index 5c54e591..6bf884a2 100644
--- a/packages/nuxt-module/playground/stylify.config.ts
+++ b/packages/nuxt-module/playground/stylify.config.ts
@@ -2,14 +2,12 @@ import { defineConfig } from '../esm';
 
 export default defineConfig({
 	sassVarsDirPath: './assets',
-	extend: {
-		compiler: {
-			components: {
-				button: 'color:blue'
-			}
-		},
-		loaders: [
-			{ test: /\.md/}
-		]
-	}
+	compiler: {
+		components: {
+			button: 'color:blue'
+		}
+	},
+	loaders: [
+		{ test: /\.md/}
+	]
 });
diff --git a/packages/nuxt/playground/stylify.config.js b/packages/nuxt/playground/stylify.config.js
index 3512f0c3..535a3d4f 100644
--- a/packages/nuxt/playground/stylify.config.js
+++ b/packages/nuxt/playground/stylify.config.js
@@ -1,14 +1,12 @@
 import { defineConfig } from '@stylify/unplugin';
 
 export default defineConfig({
-	extend: {
-		compiler: {
-			variables: {
-				red: 'darkred'
-			},
-			components: {
-				button: 'color:blue'
-			}
+	compiler: {
+		variables: {
+			red: 'darkred'
+		},
+		components: {
+			button: 'color:blue'
 		}
 	}
 });