当前位置:牛骨文开发手册前端基础html/CSSCSS Modules 用法教程 》 一、局部作用域

CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。

产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他选择器重名。这就是 CSS Modules 的做法。

下面是一个React组件App.js

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

上面代码中,我们将样式文件App.css输入到style对象,然后引用style.title代表一个class

 .title {
   color: red;
 }

构建工具会将类名style.title编译成一个哈希字符串。

 <h1 class="_3zyde4l1yATCOkgn-DBWEL">
   Hello World
 </h1>

App.css也会同时被编译。

 ._3zyde4l1yATCOkgn-DBWEL {
   color: red;
 }

这样一来,这个类名就变成独一无二了,只对App组件有效。

CSS Modules 提供各种插件,支持不同的构建工具。本文使用的是 Webpack 的css-loader插件,因为它对 CSS Modules 的支持最好,而且很容易使用。顺便说一下,如果你想学 Webpack,可以阅读我的教程Webpack-Demos

下面是这个示例的webpack.config.js

module.exports = {
   entry: __dirname + "/index.js",
   output: {
     publicPath: "/",
     filename: "./bundle.js"
   },
   module: {
     loaders: [
       {
         test: /.jsx?$/,
         exclude: /node_modules/,
         loader: "babel",
         query: {
           presets: ["es2015", "stage-0", "react"]
         }
       },
       {
         test: /.css$/,
         loader: "style-loader!css-loader?modules"
       },
     ]
   }
 };
 

上面代码中,关键的一行是style-loader!css-loader?modules,它在css-loader后面加了一个查询参数modules,表示打开 CSS Modules 功能。

现在,运行这个Demo。

 $ npm run demo01

打开 http://localhost:8080 ,可以看到结果h1标题显示为红色。