fix(plugin-palette): fix plugin usage with default theme

plugins/development/plugin-palette/src/node/palettePlugin.ts

@@ -1,3 +1,4 @@
+import { addViteConfig, chainWebpack } from '@vuepress/helper'
 import { watch } from 'chokidar'
 import type { Plugin } from 'vuepress/core'
 import { preparePaletteFile } from './preparePaletteFile.js'
@@ -90,6 +91,42 @@ export const palettePlugin = ({
     '@vuepress/plugin-palette/style': app.dir.temp(tempStyleFile),
   }),
 
+  extendsBundlerOptions: (bundlerOptions, app) => {
+    if (preset !== 'sass') return
+
+    // silent import deprecation for vite
+    addViteConfig(bundlerOptions, app, {
+      css: {
+        preprocessorOptions: {
+          sass: {
+            silenceDeprecations: ['import'],
+          },
+          scss: {
+            silenceDeprecations: ['import'],
+          },
+        },
+      },
+    })
+    // silent import deprecation for webpack
+    chainWebpack(bundlerOptions, app, (webpackOptions) => {
+      webpackOptions.module
+        .rule('scss')
+        .use('sass-loader')
+        .tap((loaderOptions) => ({
+          ...loaderOptions,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          sassOptions: {
+            ...loaderOptions.sassOptions,
+            silenceDeprecations: [
+              'import',
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+              ...(loaderOptions.sassOptions?.silenceDeprecations ?? []),
+            ],
+          },
+        }))
+    })
+  },
+
   onPrepared: async (app) => {
     await Promise.all([
       preparePaletteFile(app, {

plugins/development/plugin-sass-palette/src/node/sassPalettePlugin.ts

@@ -89,7 +89,7 @@ export const sassPalettePlugin =
       },
 
       extendsBundlerOptions: (bundlerOptions: unknown): void => {
-        // switch to modern api and silent import deprecation for vite
+        // silent import deprecation for vite
         addViteConfig(bundlerOptions, app, {
           css: {
             preprocessorOptions: {

themes/theme-default/src/client/styles/_variables.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable scss/dollar-variable-pattern */
-@forward '@vuepress/plugin-palette/palette';
+@import '@vuepress/plugin-palette/palette';
 
 // responsive breakpoints
 $MQNarrow: 959px !default;