使用css样式表美化组件

简介: 使用css样式表美化组件

使用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

相关文章
|
4月前
|
缓存 前端开发
css使用各类样式表
css使用各类样式表
N..
|
4月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
50 0
|
2天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
17 1
|
1月前
|
前端开发 JavaScript
|
2月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
2月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
|
2月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
105 2
|
3月前
|
前端开发 开发者
深入解析CSS样式表的优先级
深入解析CSS样式表的优先级
|
4月前
|
前端开发 搜索推荐 开发者
CSS不仅使得网页内容的呈现多样化和个性化成为可能,还大大简化了样式表的编写工作
【4月更文挑战第6天】CSS不仅使得网页内容的呈现多样化和个性化成为可能,还大大简化了样式表的编写工作
42 3
|
4月前
|
存储 缓存 前端开发
link 与 @import:CSS 样式表的加载策略(下)
link 与 @import:CSS 样式表的加载策略(下)