React的Sass配置

忘是亡心i 2022-11-04 14:28 197阅读 0赞

### 一、更新react-scripts或者create-react-app ###

> npm install react-scripts@latest --save

或者

> npm install -g create-react-app@latest

### 二、在已有项目下安装node-sass ###

> npm install node-sass -D

*有个小坑，node-sass版本不同对node的要求不一样。*

Node 11 ----->  node-sass 4.10

Node 10 ---->  node-sass 4.9+

Node 8   -----> node-sass 4.5.3+

## ##

###  一、安装sass-loader和node-sass依赖 ###

> npm install sass-loader node-sass --save-dev

### 二、打开react的webpack配置 ###

> node\_modules/react-scripts/config/webpack.config.dev.js

找到module下的rules，然后找到最后一个配置，修改成如下的样子

> \{
> 
>     exclude: \[/\\.js$/,/\\.html$/,/\\.json$/**,/\\.scss$/**\],
> 
>     loader: require.resolve('file-loader'),
> 
>     options: \{
> 
>             name: 'static/media/\[name\].\[hash:8\].\[ext\]',
> 
>         \},
> 
> \},
> 
> ***\{*** 
> 
> ***    test:/\\.scss$/,***
> 
> ***    loaders:\['style-loader','css-loader','sass-loader'\]***
> 
> ***\}***

配置完成 ，正常引入 scss 文件就可以了

![2021030311123552.png][]

[2021030311123552.png]: /images/20221023/de892039f4cb48fe985e57bd4a05c0c8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 React的Sass配置

019/3/11更新从react-scripts 2.0.0开始就支持直接配置sass了！?不用再eject自己配置webpack了！ [ ...

淩亂°似流年/ 2024年04月17日 22:37/ 0 赞/ 54 阅读

相关 react + sass 模板【开箱即用】

react + sass 模板前言：在框架中使用sass可以提高前端编写代码的效率，目前市场中常用且热门的框架:Vue和react，之前已经把vue2和vue3使

﹏ヽ暗。殇╰゛Y/ 2023年10月02日 15:22/ 0 赞/ 18 阅读

相关学习笔记——react如何全局配置sass

-------------------- > 在react中，在src文件夹下，新建assets文件夹，其内存放一些公共的scss文件。在组件需要使用scss文件时，需要在组

骑猪看日落/ 2022年11月20日 05:51/ 0 赞/ 664 阅读

相关 React的Sass配置

一、更新react-scripts或者create-react-app > npm install react-scripts@latest --save 或者 >

忘是亡心i/ 2022年11月04日 14:28/ 0 赞/ 198 阅读

相关 REACT_react配置sass

安装常规安装命令 npm install node-sass -D 安装自定版本 npm install node-sass@4.14.1 卸载

末蓝、/ 2022年10月19日 11:27/ 0 赞/ 166 阅读

相关学习react.js之sass语言入门

1.sass被叫做["CSS预处理器"][CSS]（css preprocessor）；它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。

Myth丶恋晨/ 2022年06月08日 00:41/ 0 赞/ 218 阅读

相关 react _create-react-app配置sass

未暴露配置（npm run eject）的情况下（如果更换电脑需要重新配置以下代码）安装依赖： npm install sass-

忘是亡心i/ 2022年05月21日 07:23/ 0 赞/ 167 阅读

相关 vue-cli中配置sass

如何配置sass 一、安装对应依赖node模块： npm install node-sass --save-dev npm install sass-loa

女爷i/ 2022年05月20日 09:23/ 0 赞/ 262 阅读

相关 create-react-app 安装postcss-pxtorem的方法，react使用sass文件c

[react-app-rewired][]：一个CRA再配置的工具，源自React社区，可以在不eject的情况下自定义配置CRA脚手架创建的app。原理很简单，在项目根目录下

ゝ一纸荒年。/ 2021年12月14日 05:07/ 0 赞/ 535 阅读

相关 sass 配置全局变量

场景：在前端工程中，我们会经常用到css预编译，有sass，less，styuls等，拿sass来说，通常我们会在项目里建一个`variables.scss`文件，里面会定义一

红太狼/ 2021年09月02日 05:36/ 0 赞/ 467 阅读