来源：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. 图论之最短路算法之SPFA算法

    SPFA(Shortest Path Faster Algorithm)算法,是一种求最短路的算法. SPFA的思路及写法和BFS有相同的地方,我就举一道例题(洛谷--P3371 [模板]单源最短路径 ...

  2. 2015 ACM-ICPC国际大学生程序设计竞赛北京赛区网络赛 1002 Mission Impossible 6

    题目链接: #1228 : Mission Impossible 6 解题思路: 认真读题,细心模拟,注意细节,就没有什么咯!写这个题解就是想记录一下rope的用法,以后忘记方便复习. rope(块状 ...

  3. Codeforces Round #395 (Div. 2) B

    Description Young Timofey has a birthday today! He got kit of n cubes as a birthday present from his ...

  4. 寻找项目中顶级Vue对象 (一)

    个人博客首发博客园: http://www.cnblogs.com/zhangrunhao/ 参考 感谢作者 从一个奇怪的错误出发理解 Vue 基本概念 安装 - Vue.js 渲染函数 - Vue. ...

  5. 题解报告：poj 1113 Wall（凸包）

    Description Once upon a time there was a greedy King who ordered his chief Architect to build a wall ...

  6. 万能makefile模板

    这里一份万能makefile模板,写opencv项目时候使用的. 前提是提前配置好 包管理工具 pkg 然后就不用每次都去 -lopencv_xxx了. ####################### ...

  7. AWK整理

    处理模式: awk的处理文本和数据的方式是这样的,它逐行扫描文件,从第一行到最后一行,寻找匹配的特定模式的行,并在这些行上进行你想要的操作.如果没有指定处理动作,则把匹配的行显示到标准输出(屏幕),如 ...

  8. DNS递归查询、主从、加密认证、负载均衡

    环境同DNS练习之正向解析. 在sishen64主机上安装必要软件 [root@sishen64 ~]# yum install -y bind bind-chroot bind-libs bind- ...

  9. new几种用法

    在 C# 中,new 关键字可用作运算符.修饰符或约束. new 运算符 用于创建对象和调用构造函数. new 修饰符 用于向基类成员隐藏继承成员. new 约束 用于在泛型声明中约束可能用作类型参数 ...

  10. Oracle、MySQL和SqlServe分页查询的语句区别

    ★先来定义分页语句将要用到的几个参数: int currentPage ; //当前页 int pageRecord ; //每页显示记录数 以之前的ADDRESSBOOK数据表为例(每页显示10条记 ...