create-react-app添加scss支持

本文分享了在React项目中配置SCSS支持的经验,对比了公司内部框架与create-react-app的差异,详细介绍了通过create-react-app添加SCSS支持的方法及遇到的问题。

之前使用了公司内部的框架进行开发,其中已经对于常用的一些配置已经搭建好了,目前没有在公司所以没法使用公司内网,所以只能通过create-react-app进行react开发,由于之前使用了scss开发样式,而且在使用scss比css更加方便,所以希望能够给脚手架工程添加scss支持,所以在网上找了一些回答:

csdn:https://blog.youkuaiyun.com/qq_36245035/article/details/81942132

腾讯云社区:https://cloud.tencent.com/developer/article/1198829

上面两篇文章是相比之下比较好的,但是腾讯云社区的介绍存在错误(亲测);按照csdn那篇文章配置可以使项目添加scss支持,但是存在不足的地方就是,在start之后,项目会把scss文件编译成css文件并且直接生成css文件,而不是在build时才生成css文件,这样导致项目结构比较不美观,而且也不方便修改(因为每个scss文件之后都跟着一个css文件);这个我还能强迫自己暂时接受,难以接受的是在start之后,如果我修改scss文件,如果是修改已经存在的css属性可以实现热更新,但是一旦我新添加css属性或者是删除css属性,就会编译错误,需要停止运行重新start之后才行,这个大大降低了开发效率(这个时候突然觉得公司的技术实力有点强)

 

### 如何在 Create React App 中设置和使用 SCSS #### 安装依赖包 为了能够在Create React App项目里运用SCSS,需先通过npm或yarn来安装`node-sass`作为项目的依赖项[^4]。 ```bash npm install node-sass --save ``` 或是采用Yarn: ```bash yarn add node-sass ``` #### 创建与导入 SCSS 文件 完成上述软件包的安装之后,在src目录下创建所需的.scss样式表文件。随后可以在组件内部利用import语句引入这些样式资源。例如,在App.js或其他任何React组件内加入如下代码片段即可加载自定义的SCSS样式[^1]。 ```javascript // 引入 .scss 文件 import './styles/App.scss'; ``` #### 处理旧版脚手架兼容性问题 对于部分较早版本的Create React App可能存在配置上的差异,导致直接按照常规方法无法正常启用SCSS支持。此时建议尝试更新至最新稳定版create-react-app工具链,或者参照官方文档针对特定版本做出适当调整[^2]。 #### 配置全局 SCSS 变量及混合宏 当希望在整个应用程序范围内共享某些CSS属性值(比如颜色主题、间距单位等),可以通过编写单独的_SCSS_文件专门用于声明此类公共参数,并借助构建工具chainWebpack选项实现自动注入到每一个页面级入口点处[^3]。 ```scss /* _variables.scss */ $primary-color: #0dcaf0; $font-size-base: 1rem; /* example of a mixin function */ @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } ``` 接着修改package.json里的scripts字段,指定react-app-rewired代替默认webpack启动流程,从而允许外部干预其编译行为。 ```json { "name": "my-app", ... "scripts": { "start": "react-app-rewire start", "build": "react-app-rewire build", "test": "react-app-rewire test" }, ... } ``` 最后编辑config-overrides.js文件,添加必要的WebPack规则以确保所有`.scss`结尾的模块都能正确解析并处理其中可能存在的@import指令指向的其他资源路径。 ```javascript const path = require('path'); module.exports = function override(config, env) { const sassLoader = { loader: 'sass-loader', options: { additionalData: `@import "./src/styles/_variables";`, } }; config.module.rules.find(rule => rule.test && String(rule.test).includes('scss')).use.push(sassLoader); return config; }; ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值