uniapp sass-loader

### 配置和使用 `sass-loader` 在 UniApp 项目

#### 安装必要的依赖包
为了使 SASS 文件能够在 UniApp 项目中正常工作，需要安装 `node-sass` 和 `sass-loader`。考虑到不同版本之间的兼容性问题，建议指定特定版本来避免潜在的错误。

npm uninstall node-sass sass-loader
npm install node-sass@5.0.0 --save-dev
npm install sass-loader@10.1.0 --save-dev

上述命令会移除现有的 `node-sass` 和 `sass-loader` 并重新安装指定版本[^4]。

#### 修改 Webpack 配置
如果遇到选项验证错误，则可能是由于传递给 `sass-loader` 的参数不符合其API定义所致。对于较新的 `sass-loader` 版本而言，“prependData” 已经被弃用并替换成了 “additionalData”。因此，在项目的配置文件（如 vue.config.js 或 uniapp.config.js）里调整加载器设置：

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                additionalData: `@import "@/assets/styles/variables.scss";`, // 自定义路径到全局样式变量或其他资源
            }
        }
    },
};

这段代码确保了每次编译 SCSS/SASS 文件时都会引入指定的基础样式表[^2]。

#### 编写 SASS 样式
一旦完成了以上两步操作，就可以像下面这样编写 `.scss` 文件，并将其应用于组件内部:

<template>
  <view class="container">
      <!-- 组件结构 -->
  </view>
</template>

<script>
export default {
  name: "ExampleComponent",
}
</script>

<style lang="scss" scoped>
.container {
  background-color: $primary-bg;
  
  h1 {
     color: darken($text-light, 10%);
  }
}
</style>

此示例展示了如何利用已导入的颜色变量 `$primary-bg` 和函数 `darken()` 来增强样式的可维护性和一致性[^5]。