React: css的引入方法这样global里面定义的样式可以作用到所有dom元素上。引入方式和全局样式一样，但是这

一般在项目中有这几种css样式要引入:

为了防止样式冲突，我通常会将这三类样式的样式名分别加上前缀:

G_*

P_*

M_*

对于全局样式，我们通常的做法是在common文件夹内定义global.css，然后直接在index.js中引入即可: import './common/frame.scss'

这样global里面定义的样式可以作用到所有dom元素上。

举个栗子:

// global.scss
.G_header {
    font-size: 20px
}

// home.js
...
<div className='G_header'>
this is home content
</div>
...

页面样式，通常是和页面组件放在同一个文件夹下，然后引入即可:

举个栗子:

// home.scss
.P_header {
    font-size: 20px;
    color: red;
}

// home.js
...
<div className='P_header'>
this is home content
</div>
...

引入方式和全局样式一样，但是这样引入，子组件也会起作用。这时候如果要起到类似vue.js中的scoped css，我们可以用css modules来实现:

方法就是css文件命名改为name.module.css, 以及引入方式改为import styles from './home.module.scss'

举个栗子:

// home.module.scss
.header {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background-color: red;
  color: #ffffff;
}

import styles from './home.module.scss'

<div className={styles.header}>
    <p>this is home page</p>
</div>

这时检查元素会发现，样式名为了防止重复已做了特殊编码。这样就只会在当前页面组件中生效。

组件样式其实和页面样式类似引入就好，如果防止样式重复，也可以使用css modules的方式。这里就不再赘述。