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都改为空就可以啦!
相关推荐
hbstream16 小时前
Hermes Agent 一周暴涨五万 Star,但我劝你别急着追
前端·人工智能
光影少年16 小时前
前端开发桌面端都有哪些框架?
前端·react.js·electron
Cecilialana16 小时前
同域名、同项目、仅 hash 变化,window.location.href 不跳转
前端·javascript
Hello--_--World16 小时前
DOM事件流与事件委托、判断数据类型、深浅拷贝、对象遍历方式
前端·javascript
落魄江湖行16 小时前
进阶篇二 Nuxt4 渲染模式:SSR/SSG/CSR 怎么选
前端·vue.js·typescript·nuxt4
M宝可梦16 小时前
ReAct 与 LLM Agentic 范式:从推理到行动的完整技术科普
前端·react.js·前端框架
x-cmd16 小时前
[260416] 谷歌 Chrome 推出 Skills 功能!帮你保存、复用提示词
前端·chrome·ai·自动化·agent·x-cmd·skill
色空大师16 小时前
【Linux-安装nginx】
linux·运维·前端·nginx·部署
董董灿是个攻城狮16 小时前
封了几百万个账号的 Claude, 路走窄了
前端
Ruihong16 小时前
你的 Vue 3 TS 类型声明,VuReact 会处理成什么样的 React?
vue.js·react.js·面试