React + Sass

闫晓明 發表於 2021-1-9 17:33:00

Sass很多公司面试都喜欢问这个，今天就写一篇简单的sass安装+使用过程 技术栈很简单，就React + Sass，本文着重讨论sass不整太多东西
<div>创建项目：create-react-app react-sass</div>
<div>安装依赖：npm install --save-dev node-sass</div>
<div> </div>
<div>create-react-app 创建的react项目默认就是支持Sass的，</div>
<div>使用只要安装node-sass即可使用</div>
<div> </div>
以上就是sass的安装过程，具体怎么用其实看官网跟着写就行了 
 
<div>项目上使用：</div>
<div><img src="https://img2020.cnblogs.com/blog/1318601/202101/1318601-20210109174418806-763745733.png" alt="" loading="lazy">
 
  

</div>
页面效果
<img src="https://img2020.cnblogs.com/blog/1318601/202101/1318601-20210109173216157-1301142075.png" alt="" loading="lazy">
 
 node-sass版本报错：
<div><img src="https://img2020.cnblogs.com/blog/1318601/202101/1318601-20210109171936362-1578024652.png" alt="" loading="lazy">
 我的node版本跟node-sass不配合

</div>
 
<div>目前解决方案如下：</div>
<div>
<div>查看node版本：node -v</div>
<div><img src="https://img2020.cnblogs.com/blog/1318601/202101/1318601-20210109172126699-1569347298.png" alt="" loading="lazy">
 
<div>去官网对比下版本号，不同node版本对应不同node-sass版本</div>
<div>https://www.npmjs.com/package/node-sass</div>

</div>
<div><img src="https://img2020.cnblogs.com/blog/1318601/202101/1318601-20210109172147397-99297733.png" alt="" loading="lazy">
 然后安装对应的版本：npm install node-sass@对应的版本号
<div> </div>
<div>比如我是node版本是12(有点老了。。)对应的就是4.12+</div>
<div>所以我安装4.14.1版本：npm install node-sass@4.14.1</div>
 

</div>

</div>
最后说点什么： 网上看文章感觉大家都喜欢聊一个技术的时候都下意识的扯到很多其他技术或者内容 虽然拓展了技术范围但同时也容易造成核心技术被干扰， 特别是小白完全被带晕了(小白:我只想学xx技术怎么大佬给我整那么多前置技术才能学我想要的xx技术(ಥ_ಥ)!!) 所以我个人觉得聊一个技术的时候就尽量只说一个东西，别整太多胡里花哨，想拓展可以再写一篇文章专门聊嘛
  
来源：https://www.cnblogs.com/konghaowei/p/14255634.html

頁: [1]

琼殿技术论坛's Archiver

React + Sass