【金秋打卡】第17天 样式模块化
2022/11/10 4:23:59
本文主要是介绍【金秋打卡】第17天 样式模块化,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:TypeScript封装播放器组件
课程章节: 第4章 4-2 模块化CSS方式
课程讲师:西门老舅
课程内容:
今天学习的内容是组件样式的模块化。
组件的模块化
组件应该是一个独立的,里面不受外面影响,外面也不受组件内部影响的结构。所以需要针对组件的 html结构、css样式和 js 逻辑进行一定处理,来实现模块化。
Webpack 工具提供了这样的功能,通过简单的配置就能生效。
{ test: /\.css$/, use: ['style-loader', { loader: 'css-loader', options: { modules: true } }], // 针对组件样式进行模块化处理 include: [path.resolve(__dirname, 'src/components')] }
通过上面的配置,webpack 在打包组件样式文件时,会生成模块化的样式。而其他部分的样式,则采用默认打包。
引入模块化的样式
普通的样式文件的导入:
import './index.css'
导入模块化的样式文件:
let styles = require('./index.css')
.popup { background-color: goldenrod; }
模板中使用模块化样式:
template() { this.tempContainer = document.createElement('div') this.tempContainer.innerHTML = ` <h1 class="${styles.color}">Popup 组件</h1> ` document.body.appendChild(this.tempContainer) }
打开浏览器,测试下效果,发现组件的样式生效。
让模块化类名更具可读性
默认生成的模块化类名是可读性很差:
修改下 css-loader 的配置:
{ test: /\.css$/, use: ['style-loader', { loader: 'css-loader', options: { modules: { localIdentName: '[path][name]__[local]--[hash:base64:5]' } } }], // 针对组件样式进行模块化处理 // include: /src\/components/ include: [path.resolve(__dirname, 'src/components')] }
webpack 就会根据我们设置的模块命名规则来生成 class 名字。
课程收获
这节课学习通过配置 css-loader 来实现样式的模块化,在组件开发中可以防止命名冲突产生影响,有两点:
- 修改 css-loader 的配置,设置 modules 选项
- 通过类似对象.属性的形式去使用样式
这篇关于【金秋打卡】第17天 样式模块化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?