React - sass配置

1. idea下载Easy Sass插件:

2. 启用后,我们写的scss文件不能直引用,所以还要下载sass依赖:

(推荐使用.scss,因为与原生.css写法接近,.sass格式更严格)

javascript 复制代码
// 下载sass依赖
npm install sass sass-loader --save-dev

3. 之后我们可以直接引入scss文件了,但是还有一点就是我们写scss会自动编译为.css以及min.css,这样看起来有点不够优雅:

我们只需要引入.scss, .css, .min.css其中一个就可以生效,为了较少代码冗余,我们只需要保留引用scss文件即可,取消默认生成.css以及.min.css文件。

4. vscode配置插件,取消默认生成 .css以及 .min.css文件:

  • 打开设置。
  • 输入easysass找到插件设置 - 点击edit in setting.json,通过代码来修改配置。
  • 最后把false,formats里的extension都改为空就可以啦!
相关推荐
Marshmallowc1 分钟前
React性能优化:useState初始值为什么要用箭头函数?深度解析Lazy Initialization与Fiber机制
前端·react.js·性能优化·前端框架·react hooks
Coder_Boy_4 分钟前
基于SpringAI的在线考试系统-试卷管理模块完整优化方案
前端·人工智能·spring boot·架构·领域驱动
摇滚侠9 分钟前
Node.js 零基础教程,Node.js 和 NPM 的安装与使用
前端·npm·node.js
谢尔登13 分钟前
Vue3架构设计——调度系统
前端·javascript·vue.js
码农研究僧15 分钟前
ruoyi+vue2的前端Demo(不分页、前端分页、后端分页)
前端·vue2·ruoyi
Kratzdisteln23 分钟前
【1902】0121-1 Dify工作流节点详细配置(方案B最终版)
java·前端·javascript
第7个前端25 分钟前
elementplus相同ElMessage只显示一个
前端
IT 行者27 分钟前
基于Servlet的纯原生Java Web工程之工程搭建:去除依赖的繁琐,返璞归真
java·前端·servlet
霍理迪31 分钟前
js数据类型与运算符
开发语言·前端·javascript
哈哈你是真的厉害32 分钟前
小白基础入门 React Native 鸿蒙跨平台开发:模拟一个URL解析工具
react native·react.js·harmonyos