引入css和less的区别

最新推荐文章于 2025-03-03 21:50:13 发布

原创最新推荐文章于 2025-03-03 21:50:13 发布 · 772 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #less

本文探讨了在前端开发中，如何使用CSS和LESS进行模块化样式管理。详细介绍了CSS和LESS的导入方式及在React组件中的应用。通过具体代码示例，展示了如何在组件中引用样式文件并正确展示。

.css
引入方式

import "../css/cale.css";

return (
            <ul className="buzy">
              {listData.map(item => (
                <li key={item.content}>
                  <Badge status={item.type} text={item.content} />
                </li>
              ))}
            </ul>
          );

.less
引入方式

import style from "./index.less";//style为定义的名字

 return (
        <ul className={style.week}>//此处要用{}包裹起来，.week是在.less文件中定义
          {listData.map(item => (
            // <li key={item.content}>
              <Badge status={item.type} text={item.content} />
            // </li>
          ))}
        </ul>
      );