来源：CSS Modules 用法教程

后面项目地址：https://github.com/947133297/lwj-webpack-demo

关键是打开这一行，表示开启loader的css module功能：

{ test: /\.css$/, loader: 'style-loader!css-loader?modules' },

style-loader ：用于创建style标签

css-loader：使css文件用起来像组件一样，允许require css进来，还可以启用css module功能

局部作用域测试

border.css

body {

   border: 10px solid darkmagenta;

}

.qwe{

    border: 10px solid black;

}

#eee{

    border: 10px solid green;

}

.outer .inner{

    border: 10px solid red;

}

app.css

body {

  background-color: blue;

}

:global(.qwe){

  font-size: 40px;

}

#eee{

  color: aqua;

}

.outer .inner{

  font-weight:;

}

入口js文件

require('./app.css');

var other1 = require('./border.css');

// Cannot read property 'inner' of undefined

// var html1 = '<div class="'+other1.outer.inner+'">other1</div>';

var html1 = '<div class="'+other1.outer+'"><div class="'+other1.inner+'">border test1</div></div>';

var html2 = '<div class="'+other1.qwe+'">border test2</div>';

var html3 = '<div id='+other1.eee+'>border test id</div>';

document.write(html1);

document.write(html2);

document.write(html3);

打包后的文件中有两段这样的代码（导出的标识符是base64生成的，转换前的字符串与路径和文件名相关）：

exports.locals = {

    "eee": "_3omJ4gpO6T45EFo0ZOMzz3",

    "outer": "_2R2TiJtwoE2Ka6dR0UXOk1",

    "inner": "_2Zm3l9VFNoYdhD18zUhAsL"

};

//...

exports.locals = {

    "qwe": "qhJc-oYXMZ34_XRr59Qtz",

    "eee": "_2EWJ0p0M9i7zNLMpM4YhOW",

    "outer": "_1wB3wnxbesTSl4WbD-h9aP",

    "inner": "_136k_jaRt4SbXZzJIe6J6O"

};

运行效果：

<style type="text/css">

  body {

    background-color: blue;

  }

  .qwe{

    font-size: 40px;

  }

  #_3omJ4gpO6T45EFo0ZOMzz3{

    color: aqua;

  }

  ._2R2TiJtwoE2Ka6dR0UXOk1 ._2Zm3l9VFNoYdhD18zUhAsL{

    font-weight: 900;

  }

</style>

<style type="text/css">

  body {

    border: 10px solid darkmagenta;

  }

  .qhJc-oYXMZ34_XRr59Qtz{

    border: 10px solid black;

  }

  #_2EWJ0p0M9i7zNLMpM4YhOW{

    border: 10px solid green;

  }

  ._1wB3wnxbesTSl4WbD-h9aP ._136k_jaRt4SbXZzJIe6J6O{

    border: 10px solid red;

  }

</style>

<body>

  <div class="_1wB3wnxbesTSl4WbD-h9aP">

    <div class="_136k_jaRt4SbXZzJIe6J6O">border test1</div>

  </div><div class="qhJc-oYXMZ34_XRr59Qtz">border test2</div>

  <div id="_2EWJ0p0M9i7zNLMpM4YhOW">border test id</div>

  <h1>Hello World</h1>

  <span class="qwe">3333</span>

  <span id="eee">4444</span>

  <div class="outer">

    <div class="inner">

      bold

    </div>

  </div>

</body>

结论：

  • 只要require了一个css，这个css会被预处理成css module（前提是打开了css-loader的module参数），然后添加由style-loader把处理后的内容到html中
  • 预处理的过程会把css中所有自定义的标识符（除标签选择符、以及global修饰外），都进行编码处理成另一个一一对应的标识符（猜测编码的主体包括选择符和文件名），这样被添加进html之后，虽然都是全局作用的，但不同css module之间同名的选择符会被编码成不同的标识，也就互不影响，就达到了“作用域”的目的了
  • 在js中使用的时候，可以通过导入的模块来获取转换后的标识符，从而为dom动态使用不同css module中样式
  • 以组件的概念来理解这里的应用场景，一个组件依赖于css，对这个css进行module预处理后，然后在js中动态获取预处理后标识，应用组件中样式。这样一来，组件间的样式就不会互相影响了。可见，要达到这样的目的，必须要动态处理样式，因为html中的类、id等不会被进行预处理。

组合class

dep.css

.depclass{

    color: darkmagenta;

}

combine.css

.red{

    background-color: red;

}

.content{

    composes: red;

    composes: depclass from './dep.css';

    border: 2px solid #000;

}

入口文件添加如下代码：

var c = require('./combine.css');

var html4 = '<div class="'+c.content+'">compose test</div>';

document.write(html4);

bundle.js有如下两段代码：

exports.locals = {

    "depclass": "_3o2XDTxGMaBRvs2mRiV1es"

};

//...

exports.locals = {

    "red": "_1KvM5G6-rmsDcUM_AatNkH",

    "content": "_3oH95_iAzM0qUNDaF3GCxv _1KvM5G6-rmsDcUM_AatNkH " + __webpack_require__(2).locals["depclass"] + ""

};

运行结果

<style type="text/css">

  ._1KvM5G6-rmsDcUM_AatNkH{

    background-color: red;

  }

  ._3oH95_iAzM0qUNDaF3GCxv{

    border: 2px solid #000;

  }

</style>

<style type="text/css">

  ._3o2XDTxGMaBRvs2mRiV1es{

    color: darkmagenta;

  }

</style>

<div class="_3oH95_iAzM0qUNDaF3GCxv _1KvM5G6-rmsDcUM_AatNkH _3o2XDTxGMaBRvs2mRiV1es">compose test</div>

结论：

  • 这次测试依赖了2个css，但运行的时候，发现只请求了一个bundle.js，而没有请求这两个css，是因为这两个css中的全部内容都打包到bundle.js中了。这就是webpack一个非常大的优点，组件化，减少网络请求次数
  • 被间接依赖的css，虽然没有在入口文件中调用require，但它的内容也被处理进来了，可见被require的css，中依赖了其他的css，这一系列的css都会被处理进来
  • compose提供一种简便的多个类的书写方式，支持组合当前文件中以及外部文件中的类；不用compose的话，自己在js中引用，然后拼接类名，再写到dom上也是没问题，如果要用到外部其他文件的话，还要自己去require，麻烦了些而已
  • 被引用的不管是直接引用（require）或者间接引用（compose），都会把这个被引用的文件内容全部加载进来

scss

修改配置文件如下：

 loaders:[

      { test: /\.s?css$/, loader: 'style-loader!css-loader?modules!sass-loader' },

    ]

1.scss:

$primaryColor: #333;

.s1{

  background: $primaryColor;

  composes: s1 from './2.scss';

}

2.scss:

$borderColor: red;

.s1{

  border: 1px solid $borderColor;

}

入口文件：

var s = require('./scss/1.scss');

var html5 = '<div class="'+s.s1+'">scss test</div>';

document.write(html5);

打包：

exports.locals = {

    "s1": "_2KqHQfE-Ms43DCsHA7wfbk"

};

exports.locals = {

    "s1": "EhwNnMc7oenHygrKydr1t " + __webpack_require__(3).locals["s1"] + ""

};

运行结果：

<style type="text/css">

  $borderColor: red;

  ._2KqHQfE-Ms43DCsHA7wfbk{

    border: 1px solid $borderColor;

  }

</style>

<style type="text/css">

  .EhwNnMc7oenHygrKydr1t {

    background: #333;

  }

</style>

<div class="EhwNnMc7oenHygrKydr1t _2KqHQfE-Ms43DCsHA7wfbk">scss test</div>

结论：

　　compose进来的scss，并没有被scss-loader所处理。所以如果要实现相关的引入功能，就只能用scss中的引入语法了。compse仅仅支持css

link和import的区别：

css module的更多相关文章

  1. Vue中scoped css和css module比较

    scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </st ...

  2. 同时使用antd和css module

    同时编译antd和css module,需要设置两次less识别. { test: /\.less$/, exclude: path.resolve(__dirname, './node_module ...

  3. webpack项目轻松混用css module

    前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突. 比如antd-mobilenpm包的引入.在不做特殊处理的前提下,样式文件将会被转译成css mo ...

  4. 如使用Typescript撸Vue（Vue2 + TS +TSX+CSS module）

    Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝.期待Vue3.0会用TS重构且会有较大改进.不过目前有一些第三方的库可以曲线优化对TS的支持.主要就介绍下过下面两个库来写Vue. 总 ...

  5. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

  6. vue css module

    步骤 module <style> -> <style module> class='header' -> :class='$style.header' <t ...

  7. create-react-app 构建的项目使用 css module 方式来书写 css

    先 yarn eject 释放出来配置文件具体参见我之前写过相关的文章(这里不再重复), 找到 config 文件夹下的文件如下图所示: 找到如图所示的配置: 书写 css 的文件名例如(App.mo ...

  8. CSS Module解决全局或本地使用@keyframes无效问题

    最近使用CSSModule开发react项目,遇到一个问题,使用@keyframes无效,问题如下 /** less + css module **/ :global { .effect-bottom ...

  9. React项目中 使用 CSS Module

    安装react-app-rewired 由于新的 react-app-rewired@2.x 版本的关系,还需要安装 customize-cra.但是我们这里不需要安装 react-app-rewir ...

随机推荐

  1. IT兄弟连 JavaWeb教程 Servlet

    Servlet的定义 Java Servlet是运行在Web服务器或应用服务器上的程序,它是作为来自Web浏览器或其他HTTP客户端的请求和HTTP服务器上的数据库或应用程序之间的中间层. 使用Ser ...

  2. git 保存文件目录

    Ubuntu中git clone就保存在你命令行现在所在的目录里 所以最好推荐 先用cd这个命令去自己想保存的目录 之后再git clone

  3. TC学习总结

    带宽管理: TC中规定描述带宽: mbps = 1024 kbps = 1024 * 1024 bps => byte/s mbit = 1024 kbit => kilo bit/s m ...

  4. Oracle数据库创建表空间及用户授权

    /*分为四步 */ /*第1步:创建临时表空间 */ create temporary tablespace test_temp tempfile 'E:\app\Administrator\orad ...

  5. 优先队列 POJ 3253 Fence Repair

    题目传送门 题意:一块木板按照某个顺序切成a[1], a[2]...a[n]的长度,每次切都会加上该两段木板的长度,问选择什么顺序切能使得累加和最小 分析:网上说这是哈夫曼树.很容易想到先切掉最长的, ...

  6. rac 添加 资源

    10g : 自动化.监控.os,存储,底成,网络,规范

  7. P3717 [AHOI2017初中组]cover

    题目背景 以下为不影响题意的简化版题目. 题目描述 一个n*n的网格图上有m个探测器,每个探测器有个探测半径r,问这n*n个点中有多少个点能被探测到. 输入输出格式 输入格式: 第一行3个整数n,m, ...

  8. Win10 隐藏盘符

    1.隐藏盘符 打开磁盘管理 -> 对要隐藏的盘符单击右键 -> 更改驱动器号和路径 -> 删除. 打开资源管理,已经看不到该盘符,该盘符已被隐藏.只是隐藏,该盘符上的数据仍然还在. ...

  9. Dom 获取、Dom动态创建节点

    一.Dom获取 1.全称:Document     Object     Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...

  10. Arduino Ethernet W5100扩展板的指示灯含义

    Arduino Ethernet W5100扩展板是继承WIZnet W5100网络芯片的扩展板.将扩展板连接到Arduino后,可使Arduino具有网络功能.此扩展板上有多个指示灯,由于轻易查不到 ...