温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS中Modules的实例用法

发布时间:2021-09-07 16:39:12 来源:亿速云 阅读:133 作者:chen 栏目:编程语言

本篇内容主要讲解“CSS中Modules的实例用法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS中Modules的实例用法”吧!

1、定义css文件。

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

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

import styles from "./style.css";
 
element.innerHTML = '<div class="' + styles.className + '">';

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

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

// 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值生成。

._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}
 
._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

到此,相信大家对“CSS中Modules的实例用法”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI