前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【说站】CSS Modules有哪些使用方法

【说站】CSS Modules有哪些使用方法

作者头像
很酷的站长
发布2022-11-24 09:52:24
4630
发布2022-11-24 09:52:24
举报
文章被收录于专栏:站长的编程笔记

CSS Modules有哪些使用

1、定义css文件。

代码语言:javascript
复制
.className {
  color: green;
}
/* 编写全局样式 */
:global(.className) {
  color: red;
}
 
/* 样式复用 */
.otherClassName {
  composes: className;
  color: yellow;
}
 
.otherClassName {
  composes: className from "./style.css";
}

2、在js模块中导入css文件。

代码语言:javascript
复制
import styles from "./style.css";
 
element.innerHTML = '<div class="' + styles.className + '">';

3、配置css-loader打包。CSS Modules不能直接使用,而是需要进行打包。

一般通过配置 css-loader 中的modules属性即可完成css modules的配置。

代码语言:javascript
复制
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use:{
          loader: 'css-loader',
          options: {
            modules: {
              // 自定义 hash 名称
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            }
          }
       }
    ]
  }
};

4、最终打包出来的css类名就是由一长串hash值生成。

代码语言:javascript
复制
._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}
 
._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

以上就是CSS Modules的使用方法,希望对大家有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • CSS Modules有哪些使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档