react + sass 模板【开箱即用】

﹏ヽ暗。殇╰゛Y 2023-10-02 15:22 13阅读 0赞

### react + sass 模板 ###

**前言：**  
在框架中使用sass可以提高前端编写代码的效率，目前市场中常用且热门的框架:Vue和react，之前已经把vue2和vue3使用sass的方法做了介绍，这里主要说的是在react中使用sass。相对于vue来说，react中对sass，less都做好了相关调整，因此使用起来更为简单。主要分为以下两个步骤：

### 一、下载安装 node-sass ###

安装node-sass时需要指定版本号，不然容易出现版本不兼容的报错信息  
我这里使用的react版本为17.0.2，使用的node-sass版本为 4.14.1

npm install  node-sass@4.14.1

推荐直接使用下面的package.json 代码替换掉工程中的package.json 文件中的代码注意修改自己的GitHub地址，也可以直接删除author行。这里同时配置了兼容的react路由和antd框架，如果不需要删掉即可。而后

npm install

或者使用yard 和 cnpm 初始化安装

{
        
      "name": "react-test",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "antd": "^4.16.13",
        "node-sass": "^4.14.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.3",
        "web-vitals": "^1.0.1"
      },
      "scripts": {
        
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "main": "index.js",
      "author": "GitHub ID",//这里改成自己GitHub的id号
      "license": "MIT"
    }

### 二、直接使用sass即可 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6IiG55-l5LqO6KGM5Li2_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6IiG55-l5LqO6KGM5Li2_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6IiG55-l5LqO6KGM5Li2_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/d2a6ed7464394e1695aea5d4b531434c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6IiG55-l5LqO6KGM5Li2,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6IiG55-l5LqO6KGM5Li2_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: https://img-blog.csdnimg.cn/2a09ec6a07f442889ce3800a023da9f7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6IiG55-l5LqO6KGM5Li2,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center