React的Sass配置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React的Sass配置相关的知识,希望对你有一定的参考价值。

参考技术A 从react-scripts 2.0.0开始就支持直接配置sass了!👇不用再eject自己配置webpack了!

                                                           creact-react-app官网

或者

有个小坑,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。

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

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

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

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

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

以上是关于React的Sass配置的主要内容,如果未能解决你的问题,请参考以下文章

create-react-app 配置sass

将 Sass (.scss) 添加到弹出的 create-react-app 配置

react中利用sass配置来做移动端适配(vw/vh)

react看这篇就够了(react+webpack+redux+reactRouter+sass)

Node SASS 的 React JS Webpack 失败

使用 7-1 sass 架构创建 react 应用程序和节点 sass chokidar