React的Sass配置

淩亂°似流年 2024-04-17 22:37 81阅读 0赞

2019/3/11更新

从react-scripts 2.0.0开始就支持直接配置sass了！?不用再eject自己配置webpack了！

[                                                           creact-react-app官网][_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _creact-react-app]

### 一、更新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 MODULE，则需要将\*.scss文件改为\*.module.scss。

> 题外话2。简书为什么修改老文章不能用markdown？气死 ?

--------------------

React提供的脚手架create-react-app创建的工程文件不像vue那种暴露出webpack来，所以添加依赖需要拐个弯。

为了配置sass需要按以下步骤进行:

###  一、安装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文件了 ###

比如手脚架的App.css就改成App.scss后

![format_png][]

App.scss

最后，sass用起来比css爽多了，比较符合程序语言的思维。

[_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _creact-react-app]: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy80NzcwOTQyLTMwMTM1ZmFiZmEyYmYxMjcucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNTA1L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png