uniapp scss

### UniApp 中使用 SCSS 的配置方法

#### 自动引入 `uni.scss`

`uni.scss` 是一个特殊文件，在代码中无需导入此文件即可在 SCSS 代码中使用其中定义的样式变量[^1]。这是因为 uni-app 编译器在 Webpack 配置中有特别处理，自动将 `uni.scss` 注入到每一个 SCSS 文件中，从而实现了样式的全局可用。

对于希望其他预处理器（如 Less 和 Stylus）也具备相同功能的情况，则需手动编辑 `vue.config.js` 来调整 Webpack 构建策略以支持这些语言的全局变量或混合宏等功能。

#### 示例：创建并使用自定义 SCSS 变量

假设要设置一些颜色常量供整个应用程序使用：

/* src/styles/variables.scss */
$primary-color: #07c160;
$secondary-color: #ff9900;

body {
    background-color: $primary-color;
}

为了让上述变量可以在所有页面和组件内生效而不需要显式导入，可以将其添加至项目的 `pages.json` 或者通过修改 `vue.config.js` 实现自动化加载。然而最简单的方式就是利用默认已经存在的 `uni.scss` 文件来声明公共样式资源。

#### 多主题切换方案简介

当涉及到更复杂的场景比如动态改变应用的主题时，可以通过 CSS 变量配合状态管理库 Vuex 完成这一需求。具体做法是在 store/index.js 设置好不同模式下的色彩参数，并监听变化事件实时更新 DOM 根节点上的对应属性值[^2]。