React umi中使用sass

news2024/11/26 2:42:20

umi默认支持less和css,如果想要使用sass,需要安装插件以及配置

一、安装umi的sass插件

yarn add @umijs/plugin-sass

二、安装sass依赖

yarn add sass-loader node-sass

 三、配置sass

在config/config.js或者 .umirc.ts文件中配置如下:

  sass: {
    implementation: require('node-sass'),
  },
  • 有的版本umi已默认集成,不需要此配置
  • 如果需要配置的话,只需要在其中一个文件配置即可,umi项目中也只会存在其中一个文件,因为这两个文件作用是冲突的。

四、避坑

引入sass插件及配置都很简单,就以上几步操作,但是过程可能没有那么顺利,大部分同学可能会遇到一些突如其来意想不到的报错,着实让人很失落。在此希望大家都很顺利,不会遇到阻碍。下面把我遇到的坑点总结如下,但愿能帮到大家:

问题1、经过上述步骤,我发现在引入.sass文件的时候还是会出现一个eslint报错

 解决方法:在typings.d.ts文件中配置,如果项目中没有这个文件的就新建。

declare module '*.scss' {
  const content: any;
  export default content;
}

问题2、安装配置好,启动项目时遇到了下面的报错:(此报错占比较高)

 解决方法:参考我另一篇播客 https://blog.csdn.net/hyupeng1006/article/details/128575025

问题3、启动项目时遇到下面的报错:

 

原因分析:node sass找不到当前node版本环境的绑定,这通常是因为运行“npm install”后node版本环境发生了变化。
解决方法:

npm rebuild node-sass

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/143671.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux 卸载elasticsearch及安装elasticsearch8.5(rpm)

目录 卸载elasticsearch rpm安装elasticsearch8.5 卸载elasticsearch # 检查elasticsearch服务状态 systemctl status elasticsearch.service; # 停止elasticsearch服务状态 systemctl stop elasticsearch.service; # 剔除elasticsearch服务 systemctl disable elasticsea…

宏任务和微任务JS执行顺序题目+总结

宏任务和微任务 resolve(传的参数)标记成功,会调用promise.then 练习网站: 关于promise深入理解太长没来及看 博客文章: promise本身是同步的,then/catch的回调函数是异步的 直接做题加深理解 点常见面…

漱玉转债,合力转债上市价格预测

漱玉转债基本信息转债名称:漱玉转债,评级:AA-,发行规模:8.0亿元。正股名称:漱玉平民,今日收盘价:18.1,转股价格:21.27。当前转股价值 转债面值 / 转股价格 *…

2.机器学习问题

2.机器学习问题 监督学习 监督学习(supervised learning)擅长在“给定输入特征”的情况下预测标签。 每个“特征-标签”对都称为一个_样本_(example)。 有时,即使标签是未知的,样本也可以指代输入特征。 …

手写RPC框架04-过滤器模块实现

源代码地址:https://github.com/lhj502819/IRpc/tree/v5 系列文章: 注册中心模块实现路由模块实现序列化模块实现过滤器模块实现自定义SPI机制增加框架的扩展性的设计与实现 为什么需要过滤器? 目前整个RPC框架的功能基本已经齐全了&…

ArcGIS基础实验操作100例--实验54 Shapfile与Graphic转换

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台:ArcGIS 10.6 实验数据:请访问实验1(传送门) 高级编辑篇--实验54 Shapfile与Graphic转换 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff…

2022天翼数字科技生态大会 五大亮点看永不落幕的“5G物联生态城”

2022天翼数字科技生态大会,近日于线上隆重开幕。大会首次“云”上绽放,将给我们带来一场怎样的科技盛宴? 本次大会,中国电信天翼物联以“智启物联未来”为主题,运用“元宇宙”VR技术,打造虚拟世界中的“5G物…

Netty 创建高性能聊天室 单聊 群聊 websocket

目录 一、简单实现Netty发送消息的案例 二、websocket连接注册用户 三、实现单聊 四、群聊功能 五、案例代码 一、简单实现Netty发送消息的案例 案例一的依赖有&#xff1a;若没springboot项目有自动对应版本&#xff0c;其他版本可以使用maven仓库的最新版本。 <depe…

img的应用

我的目的是&#xff0c;因为图片足够的大&#xff0c;我想让它在一个小盒子里居中显示&#xff0c;所以我这样做了&#xff1a;<style>.text{width: 375px;height: 100px;} </style> <body><div class"text"><img src"./img/5.png&q…

企业为什么要利用数据中台进行数字化转型?_光点科技

近两年“数字化”已经悄悄的替代了“信息化”。那么什么是“企业的数字化转型”&#xff1f;数字化转型是企业战略层面的概念&#xff0c;它并不是追求眼前效益的机灵战术&#xff0c;其本质&#xff0c;是用数字化技术对业务的重构、流程的重构和组织的重构&#xff0c;目的是…

云呐|什么是固定资产?什么是流动资产

什么是固定资产&#xff1f;什么是流动资产&#xff0c;  1、固定资产  属于产品生产过程中用来改变或者影响劳动对象的劳动资料&#xff0c;是固定资本的实物形态固定资产在生产过程中可以长期发挥作用&#xff0c;长期保持原有的实物形态&#xff0c;但其价值则随着企业生…

自己centos7系统制作iso镜像,并新建虚拟机

一、自己centos7系统制作iso镜像 1. 前置工作 将系统安全配置 SELINUX 改为 disabled&#xff0c;否则制作好的镜像无法登陆&#xff01;&#xff01;&#xff01; vim /etc/selinux/config # 将其从 enforcing 改为 disabled SELINUXdisabled2.安装 mondo rescue cd /etc…

正则表达式的使用

什么是正则表达式 正则表达式&#xff0c;又称规则表达式,&#xff08;Regular Expression&#xff0c;在代码中常简写为regex、regexp或RE&#xff09;&#xff0c;是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a 到 z 之间的字母&#xff09;和特殊字…

使用VC时一些容易犯的错误

本文迁移自本人网易博客&#xff0c;写于2011年1月13日&#xff0c;使用VC时一些容易犯的错误 - lysygyy的日志 - 网易博客 (163.com)1、在调用其他类中的函数时&#xff0c;需要在当前类中声明一个类对象&#xff0c;但是调用的时候&#xff0c;编译会出错。出现很多符号&…

2023年SQL大厂高频实战面试题(详细解析)

大家好&#xff0c;我是宁一。 已经连续四个周没有休息了&#xff0c;最近主业、副业都是忙碌的巅峰期&#xff0c;晚上11点下班回家&#xff0c;再写课写到凌晨两点。 连续一个多月连轴转&#xff0c;每天最大的愿望&#xff0c;就是睡足觉。 这一阶段终于忙完了~继续来更新SQ…

LongAdder源码【原创+图解+视频讲解】

目录 AtomicLong用法 源码分析 问题 解决 LongAdder用法 高并发下效率测试 原理 源码 add(long x) Striped64的longAccumulate 伪共享 总结 视频讲解&#xff1a; AtomicLong用法 public static void main(String[] args) {AtomicLong i new AtomicLong(0); ​S…

SQL UPDATE 语句

UPDATE 语句用于更新表中的记录。 SQL UPDATE 语句 UPDATE 语句用于更新表中已存在的记录。 SQL UPDATE 语法 UPDATE table_name SET column1 value1, column2 value2, ... WHERE condition; 参数说明&#xff1a; table_name&#xff1a;要修改的表名称。column1, colu…

C++:std::thread:线程用法

1&#xff1a;std::thread的基本用法 最简单的 std::thread用法如下&#xff0c;调用 thread将立即同时开始执行这个新建立的线程&#xff0c;新线程的任务执行完毕之后&#xff0c; main()的主线程也会继续执行。 #include<iostream> #include<thread> #include&l…

一致性hash算法和hash算法的区别和使用场景

1、hash算法使用场景 一般情况下hash算法主要用于&#xff1a;负载均衡&#xff08;nginx 请求转发&#xff0c;scg路由等&#xff09;&#xff0c;分布式缓存分区&#xff0c;数据库分库分表&#xff08;mycat&#xff0c;shardingSphere&#xff09;等。 2、hash算法大致实…

网络编程套接字——udp网络编程

目录 一、预备知识 1.端口 2.TCP协议和UDP协议 3.socket编程接口 ①socket 常见API ②sockaddr结构 二、网络编程 1.UDP网络程序 1.1服务器 ①打印 ②socket​编辑 ③bind ④recvfrom ​编辑 1.2客户端 ①sendto 1.3提升通信的花样性 ①将字符串返还 …