uniapp 安装scss

要在uni-app中使用SCSS，你需要进行以下步骤：

1. 确保你的uni-app项目已经安装了Node.js和npm。

2. 打开你的uni-app项目的根目录，并在命令行中运行以下命令来安装 `node-sass` 和 `sass-loader`：

npm install node-sass sass-loader --save-dev

3. 上述命令会安装所需的依赖包，并将它们添加到 `package.json` 文件中的 `devDependencies` 中。

4. 在项目的根目录下找到 `vue.config.js` 文件（如果没有则创建一个），并添加以下内容：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/styles/variables.scss";`
      }
    }
  }
};

在上述代码中，我们使用了 `prependData` 选项来引入一个全局的SCSS文件，可以根据你的项目需求修改引入路径。

5. 在你的uni-app项目的 `src/assets/styles` 目录下创建一个名为 `variables.scss` 的文件，并在其中定义你的SCSS变量和样式。示例代码如下：

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: #fff;
}

在上述代码中，我们定义了一个 `$primary-color` 变量，并在 `.button` 类中使用它。

6. 在你的uni-app项目中的组件或页面中，你可以直接引用SCSS文件并使用其中定义的变量和样式。示例代码如下：

<template>
  <view class="button">This is a button</view>
</template>

<style lang="scss">
@import "@/assets/styles/variables.scss";

.button {
  background-color: $primary-color;
  color: #fff;
}
</style>

通过以上步骤，你就可以在uni-app中成功安装和使用SCSS了。记得重启你的项目以使改动生效。