在 umi 中使用 .sass .scss

根据umi官方文档介绍

CSS 预处理器
Umi 内置支持less，不支持sass 和 stylus，但如果有需求，可以通过 chainWebpack 配置或者 umi 插件的形式支持。

在没配置之前，使用 .sass 、 .scss 会编译报错

这里就提供umi插件的形式，使代码中可以使用.sass 、 .scss 文件

步骤如下：

1. 首先安装 umi插件 @umijs/plugin-sass

yarn add @umijs/plugin-sass

注意：

• 安装的必须是 @umijs/plugin-sass, 不要直接写 plugin-sass ,这样的结果不对；
• 如果安装完后，出现以下这个指令：
  

npm audit fix

请一定要运行以下，不然大概率还会出问题

2. 然后安装 node-sass 和 sass-loader

yarn add node-sass sass-loader

安装完成后 package.json 文件中会有依赖记录

此时已经可以编译.sass 和 .scss 文件了

3. 最后，配置 .umirc.ts(js)

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  "sass": { }, ///配这里
});

参考文献：

踩坑：如何在Umi中配置使用Sass?