vue sass换肤

Vue 和 Sass 结合可以方便地实现网站的主题切换或换肤功能，也就是我们通常所说的“皮肤”或“样式主题”。以下是基本步骤：

1. 安装依赖：首先在 Vue 项目中安装 SCSS 的处理工具，如 `node-sass` 和 `sass-loader`。对于 Vue CLI 项目，可以在 `package.json` 中添加依赖项，并运行 `npm install` 或 `yarn add`。

// package.json
{
  "dependencies": {
    "node-sass": "^5.0.0",
    "sass-loader": "^14.0.1"
  }
}

2. 配置构建：在 `vue.config.js` 文件中配置 CSS 的处理方式，启用 SASS 加载器。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        includePaths: ['src/assets/sass'], // 指定 SCSS 文件的位置
      },
    },
  },
};

3. 创建主题文件：在指定目录（如 `src/assets/sass/themes`）下创建不同的 SCSS 主题文件，例如 `light-theme.scss` 和 `dark-theme.scss`。每个主题文件应包含变量、颜色、布局等样式设定。

// light-theme.scss
$primary-color: #fff;
$background-color: #f8f9fa;

// dark-theme.scss
$primary-color: #343a40;
$background-color: #282c34;

4. 使用主题变量：在 Vue 组件中引入主题变量并应用到样式中。通过计算属性动态选择当前激活的主题。

<style scoped>
  @import '~@/assets/sass/themes/{{ activeTheme }}';

  .app {
    background-color: $background-color;
  }

  /* ... */
</style>

<script setup>
import { ref } from 'vue';
import { activeTheme } from '@/store/theme'; // 假设主题状态保存在 store

const selectedTheme = ref(activeTheme);
</script>

5. 主题管理：在 Vuex 中设置主题状态和切换逻辑，用户可以通过按钮或其他交互触发主题切换。

// src/store/theme.js
export const state = () => ({
  activeTheme: 'light',
});

export const mutations = {
  setTheme(state, theme) {
    state.activeTheme = theme;
  },
};

// ...触发切换的函数
export function switchTheme({ commit }, theme) {
  commit('setTheme', theme);
}