VueJS中如何通过按钮点击动态切换SCSS多套样式模式

首先明确：你原来的思路不可行 #

Sass/SCSS是预编译语言，所有@import导入、变量计算逻辑都会在项目打包阶段完成，最终运行在浏览器中的只有编译后的纯CSS代码，运行时无法动态修改app.vue中引入的SCSS文件路径。

两种可行的实现方案 #

方案1：CSS变量+根类名切换（推荐） #

这是目前主题切换最常用的方案，改造成本低、切换流畅无延迟：

1. 改造三套SCSS文件，将所有主题相关的样式变量替换为CSS变量，分别挂载到对应主题的根类名下，示例：

// dark.scss
.theme-dark {
  --bg-color: #121212;
  --text-color: #ffffff;
  // 其他所有主题相关变量
}
// 原有其他import逻辑保留
@import "init";
@import "./core/components/components";
@import "components/components";
@import "layout/layout";
@import "./core/layout/docs/layout";

// default.scss
.theme-default {
  --bg-color: #ffffff;
  --text-color: #333333;
  // 对应主题变量
}
// 其他import逻辑同上

2. 在app.vue中提前引入全部三套SCSS文件：

<style lang="scss">
@import "assets/sass/default";
@import "assets/sass/dark";
@import "assets/sass/system";
</style>

3. 编写切换逻辑，点击按钮时给html根元素切换对应类名，同时可存入localStorage实现刷新后主题保持：

// test.vue逻辑
const setTheme = (theme) => {
  document.documentElement.className = `theme-${theme}`
  localStorage.setItem('current-theme', theme)
}
// 页面初始化时读取缓存的主题（可以写在app.vue的onMounted钩子中）
onMounted(() => {
  const savedTheme = localStorage.getItem('current-theme') || 'default'
  setTheme(savedTheme)
})

4. 按钮绑定点击事件：

<v-btn @click="setTheme('default')" />
<v-btn @click="setTheme('dark')" />
<v-btn @click="setTheme('system')" />

方案2：独立CSS文件动态加载（适合不想改造现有SCSS结构的场景） #

1. 配置打包规则，将三套SCSS文件分别单独编译为独立的CSS文件，打包后放到静态资源目录，比如/static/css/default.css、/static/css/dark.css、/static/css/system.css
2. 编写动态加载CSS的切换逻辑：

const changeTheme = (theme) => {
  // 移除之前加载的主题CSS
  const oldThemeLink = document.getElementById('theme-style')
  if (oldThemeLink) oldThemeLink.remove()
  // 创建新的link标签加载对应主题CSS
  const link = document.createElement('link')
  link.id = 'theme-style'
  link.rel = 'stylesheet'
  link.href = `/static/css/${theme}.css`
  document.head.appendChild(link)
  localStorage.setItem('current-theme', theme)
}

3. 按钮绑定对应点击事件即可。

内容的提问来源于stack exchange，提问作者Jazuly