uni-app开发安装sass

### 安装和配置Sass

在uni-app项目中安装和配置Sass涉及到几个关键步骤，确保开发环境能够正确解析SCSS文件并支持uView或其他依赖于SASS/SCSS的UI库。

#### 卸载现有sass-loader
如果之前已经尝试过安装`sass-loader`但遇到问题，则建议先将其移除以避免潜在冲突：

npm uninstall sass-loader node-sass

#### 安装兼容版本的sass-loader与Dart Sass
考虑到不同版本间的兼容性问题，推荐安装特定版本的`sass-loader`以及最新版的[Dart Sass](https://www.npmjs.com/package/sass)，而非较旧的[node-sass]。这可以减少因版本差异带来的构建错误[^2]:

npm install sass-loader@7.3.1 sass --save-dev

> **注意**: 使用`--save-dev`参数可将这些包标记为开发依赖项，仅用于本地编译过程而不打包到生产环境中。

#### 修改webpack配置（如有必要）
对于某些情况下可能还需要调整项目的Webpack配置来适配新的加载器设置。通常，在使用vue-cli创建的应用程序里不需要手动修改此部分，因为工具会自动处理大部分情况下的配置变更。但如果确实遇到了相关提示或警告信息，可以在根目录下通过命令生成自定义配置文件:

vue add @vue/cli-plugin-vue-next # 如果尚未更新至Vue CLI 5.x+

接着编辑`vue.config.js`加入如下内容(视具体情况而定):

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                additionalData: `@import "@/assets/styles/_variables.scss";`, // 导入全局变量等资源路径
            }
        }
    },
};

#### 验证安装成果
完成上述操作后重启开发服务器验证是否解决了之前的报错现象，并确认现在能正常读取`.scss`样式表单[^4]。