开发者学堂课程【React 入门与实战:使用 css 样式表美化组件】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/585/detail/8110
使用 css 样式表美化组件
通过写样式表的形式美化页面:
新建一个 css 目录,然后在目录里新建 cmtlist.css 样式表先美化大标题:
.title{
color: red;
}
然后导入列表组件需要的样式表:
import cssobj from '@/css/cmtlist.css'
这时候会报错,因为 Webpack 处理不了后缀名为 css 的文件,需要加 loader,所以点击拆分终端拆分成新的运行 :
cnpm I style -loader css-loader -D
装好之后在 rules 里加一个新的规则:
{ test: /\.css$ / , use: [ 'style-loader ' , 'css-loader'] }
这是打包处理 css 样式表的第三方loader
处理过程是 webpack 在打包的时候发现有后缀名为 css 的文件识别不了然后会找第三方 loader,找到后先交给 css-loader 进行处理,它处理完后发现前面有 style-loader 就会把处理结果交给 style-loader 第二次处理。然后将处理结果交给 webpack 打包合并。
注意:-loader后缀名不能省略。
修改完配置文件重启终端:
upm run dev
可以看到,样式没有生效,因为只导入了样式表,所以:
render() {return <div>
<h1 className="title">
这是评论列表组件</h1>
过程是先创建样式表,在组件里需要美化了就导入样式表,把对应的类名加到元素里,但是这个样式表无法被 webpack 处理就需要在配置文件中新增一个 loader 。