react 中class样式的书写过程及注意点

1.要书写标准的css样式可以先新建一个样式文件夹css,同时添加css文件csslist.css

将文件引入要添加样式的文件

import cssobj from '@/css/csslist.css'

2.因为.css文件不能读取所以安装style-loader和css-loader包

cnpm i style-loader cssl-loader -D

3.对.css文件进行规则匹配。

在webpack.config.js 的module部分添加

  module:{//通过module来约定第三方模块的配置规则。
    rules:[
      {test:/\.css$/,use:['style-loader','css-loader'] }  //顺序不能错
    ]
  },
4在css文件中书写
.title{
  font-size: 40px;
  color: red;
}
5.在需要添加样式的地方
//注意：在react中class和class类冲突，所以css样式名都写成className
import cssobj from '@/css/csslist.css'
<h1 className="title">这是评论列表组件1</h1>
样式生效