二、全局作用域

CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。

App.css加入一个全局class。

 .title {
   color: red;
 }
 
 :global(.title) {
   color: green;
 }

App.js使用普通的class的写法，就会引用全局class。

 import React from "react";
 import styles from "./App.css";
 
 export default () => {
   return (
     <h1 className="title">
       Hello World
     </h1>
   );
 };

运行这个示例。

 $ npm run demo02

打开 http://localhost:8080，应该会[看到](http://ruanyf.github.io/css-modules-demos/demo02/)`h1`标题显示为绿色。

CSS Modules 还提供一种显式的局部作用域语法:local(.className)，等同于.className，所以上面的App.css也可以写成下面这样。

 :local(.title) {
   color: red;
 }
 
 :global(.title) {
   color: green;
 }