react + sass 模板【开箱即用】

最新推荐文章于 2024-04-18 03:34:40 发布

讷言丶

最新推荐文章于 2024-04-18 03:34:40 发布

阅读量1k

点赞数 2

分类专栏： react 文章标签： react.js sass javascript

本文链接：https://blog.csdn.net/weixin_51033461/article/details/121331768

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在React项目中使用Sass来提升前端开发效率。首先，通过指定版本安装node-sass，例如node-sass@4.14.1，以避免版本不兼容问题。然后，提供了一个包含react-router-dom和antd配置的package.json示例，帮助快速搭建环境。只需运行npm install或使用yard和cnpm初始化安装，即可开始使用Sass进行开发。

摘要由CSDN通过智能技术生成

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"
}