根据umi官方文档介绍
CSS 预处理器
Umi 内置支持less
,不支持sass
和 stylus
,但如果有需求,可以通过 chainWebpack
配置或者 umi 插件
的形式支持。
在没配置之前,使用 .sass
、 .scss
会编译报错
这里就提供umi插件
的形式,使代码中可以使用.sass
、 .scss
文件
步骤如下:
- 首先安装 umi插件
@umijs/plugin-sass
yarn add @umijs/plugin-sass
注意:
- 安装的必须是 @umijs/plugin-sass, 不要直接写 plugin-sass ,这样的结果不对;
- 如果安装完后,出现以下这个指令:
npm audit fix
请一定要运行以下,不然大概率还会出问题
- 然后安装
node-sass
和sass-loader
yarn add node-sass sass-loader
安装完成后 package.json
文件中会有依赖记录
此时已经可以编译.sass
和 .scss
文件了
- 最后,配置 .umirc.ts(js)
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
routes: [
{ path: '/', component: '@/pages/index' },
],
"sass": { }, ///配这里
});
参考文献: