冷知识-css全局module使用

最新推荐文章于 2025-01-01 18:48:13 发布

weixin_45979310

最新推荐文章于 2025-01-01 18:48:13 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_45979310/article/details/120549674

本文介绍了如何在main.js中通过import引入并应用 './assets/css/message.module.less' 文件中的样式，重点讲解了模块化的使用以及如何创建一个固定在屏幕中心的红色消息提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在main.js 中

import styles from './assets/css/message.module.less'
const div = document.createElement("div");
div.className = styles.message;		// 如果文件名中没有 module，那么则undefined。
div.innerText = "我是全局module生成的";
document.body.appendChild(div);

在对应路径，新建相应的文件名（中间的module是关键点）

.message {
    border: 1px solid;
    width: 400px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: red;
}