umi使用scss

糖🍬

最开始报错是这样的
image.png
就感觉是scss的问题。
百度了很久
都是
1.安装 node-sass 和 sass-loader
2.在.umirc.js文件中添加配置

cssLoaderOptions:{
    localIdentName:'[local]'
  }

但是我的.umirc.js 文件 和网上的不一样。也不支持这个配置。
又在cssloader上查了很久,大概是方向错了?。
然后。。找到了

转载一下
根据umi官方文档介绍

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

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

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

步骤如下:

首先安装 umi插件 @umijs/plugin-sass
yarn add @umijs/plugin-sass
1
注意:

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

npm audit fix
1
请一定要运行以下,不然大概率还会出问题

然后安装 node-sass 和 sass-loader
yarn add node-sass sass-loader
1
安装完成后 package.json 文件中会有依赖记录

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

最后,配置 .umirc.ts(js)
export default defineConfig({
nodeModulesTransform: {

type: 'none',

},
routes: [

{ path: '/', component: '@/pages/index' },

],
"sass": { }, ///配这里
});

阅读 583

9 声望
0 粉丝
0 条评论
你知道吗?

9 声望
0 粉丝
文章目录
宣传栏