zoukankan      html  css  js  c++  java
  • CSS Module

    一、全局样式冲突

    过程是这样的:你现在有两个模块,分别为A、B,你可能会单独针对这两个模块编写自己的样式,例如a.css、b.css,看一下代码

    // A.js

    import './a.css'

    const html = '<h1 class="text">module A</h1>'

    // B.js

    import './b.css'

    const html = '<h1 class="text">module B</h1>'

    下面是样式:

    /* a.css */

    .text { color: red; }

    /* b.css */

    .text { color: blue; }

    由于样式是统一加载到入口中,因此实际上的样式合在一起显示顺序为:

    /* a.css */

    .text { color: red; }

    /* b.css */

    .text { color: blue; }

    知道了问题,接下来我们看看该如何解决。

    二、基本使用

    首先在webpack上进行配置启用CSS Modules:

    {

      test: /.css$/,

      loaders: [

        'style-loader',

         'css-loader?modules'

      ]

    }

    接着创建一个modules.css的文件,内容为:

    .color { color: red; }

    接下来使用这个样式,在index.js中:

    // 整体引入 import modules from './modules.css'

    // 按需引入 import { color } from './modules.css'

    不同引入方式的使用方式如下:

    <p className={modules.color}>这是整体引入的红色文字</p>

    <p className={color}>这是通过按需引入红色文字</p>

     

     

     

     

     

     

  • 相关阅读:
    Emacs 安装 jedi
    PHP+ MongoDB
    Debian 7 安装 Emacs 24.3
    在Code first中使用数据库里的视图
    Emacs安装auto-complete
    Debian 7.4 中配置PHP环境
    ASP.NET MVC 下载列表
    JDicom使用指南
    Windows常用的DOS命令
    Entity Framework问题总结
  • 原文地址:https://www.cnblogs.com/embrace-ly/p/11127448.html
Copyright © 2011-2022 走看看