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>
樣式生效