# 2207-react-project

**Repository Path**: Elvmx/2207-react-project

## Basic Information

- **Project Name**: 2207-react-project
- **Description**: 1111111111111111111111111111111111111111111111
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-14
- **Last Updated**: 2022-09-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## CRA 脚手架如何配置 alias 别名（webpack）

> CRA 内部使用的是 webpack 构建工具，为了避免开发人员去修改 webpack 配置，导致一些问题。它将 webpack 相关的配置都隐藏起来


1. 解除封印
    注意，官方说这个操作是不可逆的。解除之后不能重新封印。（git）
    1. 运行 npm run eject
    2. config/webpack.config.js 找到 alias 配置位置，配置一下 src 即可。

2. craco

3. react-app-rewired 和 customize-cra 
    


## React 中如何处理组件私有样式

1. css module 模块化的 css
    1. 将 css 后缀前加上一个 module  index.scss => index.module.scss
    2. 组件内使用变量去接收
        import './index.scss' => import style from './index.module.scss'
    3. classname={style.xxx} 使用
  
  原理：.a  => dashboard => .dashboard_a_xxxx
        .a  => hello => .hello_a_yyyy

2. 推荐使用 scss 或 less 然后遵循一些规则就好
    1. 每个路由组件的根元素都取一个独有的className。一般就是这个组件的名字
    2. 样式，写嵌套写法

3. react-jss

4. styled-components