使用 css 样式表美化组件|学习笔记

简介: 快速学习使用 css 样式表美化组件

开发者学堂课程【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

image.png

可以看到,样式没有生效,因为只导入了样式表,所以:

render() {return <div>

<h1 className="title">

这是评论列表组件</h1>

image.png

过程是先创建样式表,在组件里需要美化了就导入样式表,把对应的类名加到元素里,但是这个样式表无法被 webpack 处理就需要在配置文件中新增一个 loader

相关文章
|
8月前
|
缓存 前端开发
css使用各类样式表
css使用各类样式表
N..
|
8月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
75 0
|
3月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
327 1
|
3月前
|
数据可视化 前端开发 搜索推荐
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
58 4
|
4月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
4月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
141 1
|
3月前
|
数据可视化 前端开发 数据安全/隐私保护
DIY可视化快速组件CSS样式设计生成源码
DIY可视化快速组件CSS样式设计生成源码
42 0
|
4月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
142 0
|
5月前
|
前端开发 JavaScript

热门文章

最新文章