用法教程

CSS Modules 用法教程

2016/06/19 · CSS ·
Modules

原著出处:
阮一峰   

学过网页开垦就能够明白,CSS 不能够算编制程序语言,只是网页样式的一种描述方法。

为了让 CSS
也能适用软件工程措施,技师想了各个措施,让它变得像一门编制程序语言。从最早的Less、SASS,到后来的
PostCSS,再到近来的 CSS in JS,都以为着解决那几个主题素材。

皇家赌场手机版 1

正文介绍的 CSS Modules
有所不一致。它不是将 CSS
改造成编制程序语言,而是作用很单纯,只插足了1部分成效域和模块正视,那刚刚是网页组件最须要的效率。

故而,CSS Modules
很容易学,因为它的平整少,同时又卓殊有用,能够有限协助有些组件的体裁,不会潜移默化到任何零件。

皇家赌场手机版 2

webpack 之 css module

前端的进化太快了,此前拜读了壹篇在 201陆 年学 JavaScript
是一种何等的心得?,不禁感慨,放1个三年前的前端来对待以往的前端圈子,推测也是懵逼的。

CSS Modules 入门及 React 中实践

2017/03/25 · CSS ·
React

原版的书文出处:
AlloyTeam   

零、示例库

小编为这几个课程写了3个示例库,包蕴三个德姆o。通过它们,你能够轻巧学会CSS
Modules。

首先,克隆示例库。

JavaScript

$ git clone

1
$ git clone https://github.com/ruanyf/css-modules-demos.git

然后,安装正视。

JavaScript

$ cd css-modules-demos $ npm install

1
2
$ cd css-modules-demos
$ npm install

紧接着,就能够运作第一个示范了。

JavaScript

$ npm run demo01

1
$ npm run demo01

开发浏览器,访问

webpack配置
css-loader?modules
modules 字段表示开启css module

言归正传

自个儿取标题的本领也是挺瞎的……


引言作弄了壹晃javascript的生机勃勃,其实无须是帮倒忙,举例ES20壹五的发布和利用确实让自个儿感触到敲代码时候比极大的福利,比方箭头函数(笑)。但针锋相对来说的,CSS的前进却并不是那么快。
能够想到的只是是各个预管理器

  • LESS
  • SASS
  • 以及随后相比流行的postcss

可是他们大概不曾缓慢解决叁个难点,命名的惨痛……

试想一下,叁个大的档案的次序,css命名满天飞,1不留神就覆盖了大局的class名咋办?

** css毕竟怎么了?**

  1. 大局污染
  2. 取名混乱
  3. 依赖管理不干净

写在头里

读文先看此图,能先有个大约概念:

皇家赌场手机版 3

翻阅本文须求 1一m 二4s。

壹、局地效用域

CSS的平整都以全局的,任何3个零部件的体制规则,都对全体页面有效。

发出部分效率域的不今不古方法,正是行使八个有一无贰的class的名字,不会与别的选拔珍视名。那就是CSS Modules 的做法。

上边是二个React组件App.js。

JavaScript

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

1
2
3
4
5
6
7
8
9
10
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。

CSS

.title { color: red; }

1
2
3
.title {
  color: red;
}

创设筑工程具会将类名style.title编写翻译成一个哈希字符串。

XHTML

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

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

App.css也会同时被编写翻译。

JavaScript

._3zyde4l1yATCOkgn-DBWEL { color: red; }

1
2
3
._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

那样1来,这些类名就改成有一无二了,只对App组件有效。

CSS Modules
提供各类插件,帮助不相同的营造筑工程具。本文使用的是
Webpack
的css-loader插件,因为它对
CSS Modules 的支撑最佳,而且很轻巧选择。顺便说一下,若是您想学
Webpack,能够翻阅小编的科目Webpack-Demos。

下边是其一示例的webpack.config.js。

JavaScript

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” }, ] } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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。

JavaScript

$ npm run demo01

1
$ npm run demo01

打开
,能够看看结果,h一标题突显为革命。

定制css类名规则
modules&localIdentName=[path][name]—[local]—[hash:base64:5]
localIdentName 字段定义css类名规则

怎么办,试试BEM呗

您还真别说,产业界确实有一个至极正确的css命名规范,BEM(不开展了),风乐趣的全自动检索一下吧,BEM标准的裨益在于尽或许的化解了css命名全局污染的标题。不过,它的平整真的太麻烦了,还不佳记。

举个例证

.block{} /* 块 */
.block__element{} /* 元素 */
.block--modifier{} /* 修饰符 */

什么都别说了……

CSS Modules介绍

CSS Modules是什么东西啊?首先,让大家从官方文书档案下手:
GitHub – css-modules/css-modules: Documentation about
css-modules

A CSS Module is a CSS file in which all class names and animation
names are scoped locally by default.
CSS模块就是有所的类名都只有部分成效域的CSS文件。

因此CSS
Modules既不是官方正规,也不是浏览器的特征,而是在创设步骤(比方使用Webpack或Browserify)中对CSS类名选用器限定功效域的1种方式(通过hash完结类似于命名空间的诀窍)。

It doesn’t really matter in the end (although shorter class names mean
shorter stylesheets) because the point is that they are dynamically
generated, unique, and mapped to the correct
styles.在应用CSS模块时,类名是动态变化的,唯壹的,并正确对应到源文件中的各样类的样式。

那也是落成样式成效域的规律。它们被限制在特定的沙盘里。举个例子我们在buttons.js里引进buttons.css文件,并使用.btn的体制,在其它零件里是不会被.btn影响的,除非它也引进了buttons.css.

可我们是出于什么目的把CSS和HTML文件搞得那样零碎呢?大家怎么要选取CSS模块呢?

贰、全局功效域

CSS Modules
允许行使:global(.className)的语法,声美素佳儿(Friso)个大局规则。凡是那样注明的class,都不会被编写翻译成哈希字符串。

App.css加盟3个大局class。

JavaScript

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

1
2
3
4
5
6
7
.title {
  color: red;
}
 
:global(.title) {
  color: green;
}

App.js运用普通的class的写法,就能够引用全局class。

JavaScript

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

1
2
3
4
5
6
7
8
9
10
import React from ‘react’;
import styles from ‘./App.css’;
 
export default () => {
  return (
    <h1 className="title">
      Hello World
    </h1>
  );
};

运作这几个示例。

JavaScript

$ npm run demo02

1
$ npm run demo02

打开

CSS Modules
还提供一种显式的有的效能域语法:local(.className),等同于.className,所以地方的App.css也得以写成上边那样。

JavaScript

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

1
2
3
4
5
6
7
:local(.title) {
  color: red;
}
 
:global(.title) {
  color: green;
}

引入:
用法教程。import style from ‘./App.css’;
style.title{}

CSS modules来了

要说js模块化,这几年正是讲烂了,什么英特尔,CMD,UMD各个,以及ES20一伍原生都起来帮助js模块化。讲真,在笔者起来接触了模块化js之后确实给自己带来了许多的福利(点个赞)。
同一,CSS module的推动只怕也说不定解决近来大家最脑瓜疼的CSS 全局污染难题了。

为什么大家供给CSS模块化

叁、定制哈希类名

css-loader私下认可的哈希算法是[hash:base64],这会将.title编译成._三zyde4l一yATCOkgn-DBWEL那样的字符串。

webpack.config.js里头能够定制哈希字符串的格式。

JavaScript

module: { loaders: [ // … { test: /.css$/, loader:
“style-loader!css-loader?modules&localIdentName=[path][name]—[local]—[hash:base64:5]”
}, ]用法教程。 }

1
2
3
4
5
6
7
8
9
module: {
  loaders: [
    // …
    {
      test: /.css$/,
      loader: "style-loader!css-loader?modules&amp;localIdentName=[path][name]—[local]—[hash:base64:5]"
    },
  ]
}

运作这么些示例。

JavaScript

$ npm run demo03

1
$ npm run demo03

你会发现.title被编写翻译成了demo0叁-components-App—title—GpMto。

全局:
:global()
eg:
:global(.title){}

CSS modules语法篇

任何从头前,要代表一下,CSS modules不是一个新语言,而只是CSS in
JS一贯贯彻格局,最值得爱惜的是,它的条条框框尤其少,差不离0资金!那壹部分参考了阮一峰大神的CSS
Modules
用法教程

CSS全局功效域难点

CSS的平整都以大局的,任何四个零部件的体制规则,都对全部页面有效。相信写css的人都会超出样式争执(污染)的标题。

于是一般这么做(作者都做过):
* class命名写长一点啊,降低争执的概率
* 加个父成分的选拔器,限制范围
* 重新命名个class吧,相比较保障

故而亟待消除的主题材料就是css局地功效域制止全局样式争辩(污染)的标题

四、 Class 的组合

在 CSS Modules
中,三个采纳器可以再三再四另三个选取器的平整,那名称叫”组合”(“composition”)。

在App.css中,让.title继承.className

JavaScript

.className { background-color: blue; } .title { composes: className;
color: red; }

1
2
3
4
5
6
7
8
.className {
  background-color: blue;
}
 
.title {
  composes: className;
  color: red;
}

App.js永不修改。

JavaScript

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

1
2
3
4
5
6
7
8
9
10
import React from ‘react’;
import style from ‘./App.css’;
 
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

运作那个示例。

JavaScript

$ npm run demo04

1
$ npm run demo04

打开

App.css编写翻译成上面包车型客车代码。

JavaScript

._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 {
background-color: blue; }

1
2
3
4
5
6
7
._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}
 
._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

对应地, h一的class也会编写翻译成<h一 class=”_2DHwuiHWMnKTOYG45T0x34
_10B-buq6_BEOTOl9urIjf8″>。

class组合:
composes:classname;

一. 局地效能域

轻便,使用CSS modules ,每叁个class都足以生成二个唯1的class名

例如
创办一个button.css文件,并写入代码

.red{
   color:red  
}

引进到另1个index.js(省略了1有些代码)

import buttons from "./buttons.css";
element.innerHTML = `<div class="${buttons.red}">`

那便是说,在渲染到html文件之中的时候,这里的class大概正是_3N_PGYCwi_3X8rf_WN50yo(命名规则其实是足以自动调度的,上面会波及)

JS CSS不能够共享变量

复杂组件要采用 JS 和 CSS 来共同管理体制,就能够变成有些变量在 JS 和 CSS
中冗余,CSS预管理器/后管理器 等都不提供跨 JS 和 CSS 共享变量那种力量。

五、输入任何模块

选用器也得以一而再其余CSS文件之中的条条框框。

another.css

JavaScript

.className { background-color: blue; }

1
2
3
.className {
  background-color: blue;
}

App.css能够承袭another.css里面包车型客车平整。

JavaScript

.title { composes: className from ‘./another.css’; color: red; }

1
2
3
4
.title {
  composes: className from ‘./another.css’;
  color: red;
}

运营那一个示例。

JavaScript

$ npm run demo05

1
$ npm run demo05

打开

引进其余模块:
composes: classname from ’./style.css’;

二. 大局功效域

CSS Modules
允许利用:global(.className)的语法,声澳优(Ausnutria Hyproca)个大局规则。凡是那样注明的class,都不会被编写翻译成哈希字符串。

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

第三个渲染的class仍然是.title

CSS Modules
还提供壹种显式的壹部分作用域语法:local(.className),等同于.class,所以上述的css文件也得以写成上面那样。

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

强健并且扩展方便的CSS

用作有追求的程序员,编写健壮并且扩展方便的CSS从来是大家的对象。那么什么样定义健壮并且扩张方便?有四个要点:

  • 面向组件 – 管理 UI 复杂性的特级施行正是将 UI 分割成二个个的小组件
    Locality_of_reference
    。即使你正在利用1个合理的框架,JavaScript
    方面就将原生帮衬(组件化)。例如,React
    就鼓励高度组件化和撤销合并。大家期待有2个 CSS 架构去相称。
  • 沙箱化(Sandboxed) –
    假诺2个零部件的体裁会对别的零件发生不须要以及意外的熏陶,那么将
    UI
    分割成组件并从未什么样用。就那地点来讲,CSS的大局意义域会给你变成担任。
  • 有利于 –
    大家想要全数好的事物,并且不想发生更加多的专业。也正是说,我们不想因为运用这些架构而让大家的开荒者体验变得更糟。恐怕的话,我们想开荒者体验变得更加好。

陆、输入变量

CSS Modules 支持使用变量,不过须求安装 PostCSS 和
postcss-modules-values。

JavaScript

$ npm install –save postcss-loader postcss-modules-values

1
$ npm install –save postcss-loader postcss-modules-values

把postcss-loader加入webpack.config.js。

JavaScript

var values = require(‘postcss-modules-values’); 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!postcss-loader” }, ] }, postcss: [
values ] };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var values = require(‘postcss-modules-values’);
 
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!postcss-loader"
      },
    ]
  },
  postcss: [
    values
  ]
};

接着,在colors.css中间定义变量。

JavaScript

@value blue: #0c77f8; @value red: #ff0000; @value green: #aaf200;

1
2
3
@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

App.css能够引用那个变量。

JavaScript

@value colors: “./colors.css”; @value blue, red, green from colors;
.title { color: red; background-color: blue; }

1
2
3
4
5
6
7
@value colors: "./colors.css";
@value blue, red, green from colors;
 
.title {
  color: red;
  background-color: blue;
}

运作那个示例。

JavaScript

$ npm run demo06

1
$ npm run demo06

打开

1 赞 3 收藏
评论

皇家赌场手机版 4

引进变量:(postcss-loader ;postcss-modules-values)

三. 定制哈希类名

合作webpack食用更佳
皇家赌场手机版 ,举个同盟webpack使用的事例

//webpack.config.js文件
……
module: { 
loaders: [  // ... 
{ 
 test: /\.css$/, 
 loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]" },
]
}

照旧是地方的例证
创造2个button.css文件,并写入代码

.red{
   color:red  
}

那么,渲染的class可能是 .buttons__red___3N_PG

CSS模块化方案分类

CSS 模块化的缓慢解决方案有好些个,但首要有三类。

  1. web pack配置扩充 postcss: [require(‘postcss-modules-values’) ]
  2. 语法(注意‘: ’ 号后空格,去掉会报错!)
    @value green: #aaf200; 定义变量
    @value colors: “./colors.css”;
    @value blue, red, green from colors;
4. Class 的组合

在 CSS Modules
中,两个选用器能够延续另四个选取器的平整,那名称叫”组合”(”composition”)。

向来上代码
开创一个button.css文件,并写入代码

.red{
   color:red  
}
.button{
  composes:red
}

利用composes承继了class名称叫red的性质,有点类似于sass里面包车型地铁@extend。

其它还支持三个模块的引入
例如
创造1个button.css文件,并写入代码

.red{
   color:red  
}

同目录创设1个button二.css文本,并写入代码

.button{
  composes:red from './button.css'
}

通过** composes:red from ‘./button.css’**兑现了多少个公文之间的咬合。

CSS 命名约定

标准化CSS的模块消除决方案(举个例子BEM BEM — Block Element
Modifier,OOCSS,AMCSS,SMACSS,SUITCSS)
但存在以下难题:
* JS CSS之间还是未有开掘变量和采纳器等
* 复杂的命名

5. 输入变量

接触不多,具体贯彻详见原来的书文。

CSS in JS

根本撤除 CSS,用 JavaScript 写 CSS 规则,并内联样式。 React: CSS in JS
// Speaker
Deck。Radium,react-style
属于那一类。但存在以下难点:
* 不可能使用伪类,媒体询问等
* 样式代码也会油可是生多量重新。
* 不能应用成熟的 CSS 预管理器(或后Computer)

CSS modules 使用实例

*此间运用 webpack *

项目结构

  • src (文件夹)
  • node_modules (文件夹)
  • .babelrc
  • index.html
  • webpack.config.js
  • package.json

假如项目标文书夹是 app, 在app文件夹内npm init 生成 package.json
文件
然后(请确认已全局安装webpack),
npm install -D babel-core babel-loader babel-preset-es2015 extract-text-webpack-plugin css-loader webpack

在webpack.config.js中写入以下内容

var path = require('path')
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: './src',
    output: {
        path: 'bulid',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            include: path.resolve(__dirname, './src')
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
            include: path.resolve(__dirname, 'src'),
        }]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ],
    devtool: "source-map"
}

在.babelrc文件中写入

{
 "presets": ["es2015"]
}```

在index.html中写入

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document name</title>
<link rel=”stylesheet” href=”bulid/styles.css”>
</head>
<body>
<h1>CSS Modules demo</h1>

<script src="bulid/bundle.js"></script>

</body>
</html>

准备工作做完,我们在src文件夹中进行具体的内容操作

###### step1 
在src中新建 index.js,内容

import buttons from ‘./buttons.css’

let element =
<div class="${buttons.red}"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur laudantium recusandae itaque libero velit minus ex reiciendis veniam. Eligendi modi sint delectus beatae nemo provident ratione maiores, voluptatibus a tempore!</p> </div>;
document.write(element);

###### setp2 
在src文件夹中新建buttons.css,内容

.red{
color:red
}

###### setp3 
在命令行中执行webpack任务,生成bulid文件夹。

命令行 输入   ```webpack``` 尝试一下吧!!
***
在上述的项目中,css modules的核心是webpack.config.js中 

{
test: /.css$/,
loader:
ExtractTextPlugin.extract(‘css?modules&importLoaders=1&localIdentName=[name][local]_[hash:base64:5]’),
include: path.resolve(__dirname, ‘src’),
}

# 文章参考
[CSS Modules入门Ⅰ:它是什么?为什么要使用它?
](https://zhuanlan.zhihu.com/p/23571898)
[CSS Modules入门Ⅱ:快速上手](https://zhuanlan.zhihu.com/p/23602046)
[CSS Modules 用法教程](http://www.bshare.cn/share)

利用JS 来保管体制模块

行使JS编写翻译原生的CSS文件,使其负有模块化的工夫,代表是 CSS Modules
GitHub – css-modules/css-modules: Documentation about
css-modules 。

CSS Modules 能最大化地整合现存 CSS 生态(预管理器/后Computer等)和 JS
模块化技巧,大概零读书花费。只要你利用
Webpack,可以在其他项目中央银行使。是小编觉妥帖前最棒的 CSS 模块解决决方案。

CSS Modules 使用教程

启用 CSS Modules

JavaScript

// webpack.config.js
css?modules&localIdentName=[name]__[local]-[hash:base64:5]

1
2
// webpack.config.js
css?modules&localIdentName=[name]__[local]-[hash:base64:5]

加上 modules 即为启用,localIdentName 是安装生成样式的命名规则。

CSS

/* components/Button.css */ .normal { /* normal 相关的兼具样式 */ }

1
2
/* components/Button.css */
.normal { /* normal 相关的所有样式 */ }

JavaScript

// components/Button.js import styles from ‘./Button.css’;
console.log(styles); buttonElem.outerHTML = `<button
class=${styles.normal}>Submit</button>`

1
2
3
4
// components/Button.js
import styles from ‘./Button.css’;
console.log(styles);
buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

生成的 HTML 是

XHTML

<button class=”button–normal-abc53″>Submit</button>

1
<button class="button–normal-abc53">Submit</button>

注意到 button--normal-abc53 是 CSS Modules 按照 localIdentName
自动生成的 class 名。在这之中的abc53
是依据给定算法生成的连串码。经过那样模糊管理后,class
名基本便是唯1的,大大降低了体系中样式覆盖的可能率。同时在生养景况下修改规则,生成越来越短的
class 名,能够升高 CSS 的压缩率。

上例中 console 打字与印刷的结果是:

CSS

Object {   normal: ‘button–normal-abc53’,   disabled:
‘button–disabled-def886’, }

1
2
3
4
Object {
  normal: ‘button–normal-abc53’,
  disabled: ‘button–disabled-def886’,
}

CSS Modules 对 CSS 中的 class 名都做了拍卖,使用对象来保存原 class
和模糊后 class 的附和关系。

由此那个总结的拍卖,CSS Modules 完结了以下几点:
* 全体样式都以一些功用域 的,消除了大局污染难点
* class 名生成规则配置灵活,能够此来减弱 class 名
* 只需引用组件的 JS 就能够消除组件全部的 JS 和 CSS
* 依然是 CSS,大概 0 学习开支

CSS Modules 在React中的推行

那么大家在React中怎么使用?

手动引用消除

className 处间接行使 css 中 class 名即可。

JavaScript

import React from ‘react’; import styles from ‘./table.css’;   export
default class Table extends React.Component {     render () {
        return <div className={styles.table}>             <div
className={styles.row}>             </div>
        </div>;     } }

1
2
3
4
5
6
7
8
9
10
11
import React from ‘react’;
import styles from ‘./table.css’;
 
export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
            </div>
        </div>;
    }
}

渲染出来的组件出来

XHTML

<div class=”table__table___32osj”>     <div
class=”table__row___2w27N”>     </div> </div>

1
2
3
4
<div class="table__table___32osj">
    <div class="table__row___2w27N">
    </div>
</div>

react-css-modules

万1您不想频仍的输入 styles.**,有一个 GitHub –
gajus/react-css-modules: Seamless mapping of class names to CSS modules
inside of React
components.,它通过高阶函数的款型来变化className,不过不推荐应用,后文种提到。

API也很简单,给组件外包多少个CSSModules就能够。

JavaScript

import React from ‘react’; import CSSModules from ‘react-css-modules’;
import styles from ‘./table.css’;   class Table extends React.Component
{     render () {         return <div styleName=’table’>
        </div>;     } }   export default CSSModules(Table,
styles);

1
2
3
4
5
6
7
8
9
10
11
12
import React from ‘react’;
import CSSModules from ‘react-css-modules’;
import styles from ‘./table.css’;
 
class Table extends React.Component {
    render () {
        return <div styleName=’table’>
        </div>;
    }
}
 
export default CSSModules(Table, styles);

不过这样大家可以看看,它是要求周转时的依附,而且亟需在运行时才获得className,品质损耗大,那么有未有方便又象是无损的点子吧?答案是部分,使用babel插件babel-plugin-react-css-modulesGitHub
– gajus/babel-plugin-react-css-modules: Transforms styleName to
className using compile time CSS module
resolution.
className获得前置到编写翻译阶段。

babel-plugin-react-css-modules

babel-plugin-react-css-modules
能够达成选取styleName属性自动加载CSS模块。大家因而该babel插件来进展语法树解析并最后生成className

来探视组件的写法,现在您只供给把className换成styleName就可以获得CSS局地功用域的技能了,是还是不是分外轻巧。

JavaScript

import React from ‘react’; import styles from ‘./table.css’;   class
Table extends React.Component {     render () {         return <div
styleName=’table’>         </div>;     } }   export default
Table;

1
2
3
4
5
6
7
8
9
10
11
import React from ‘react’;
import styles from ‘./table.css’;
 
class Table extends React.Component {
    render () {
        return <div styleName=’table’>
        </div>;
    }
}
 
export default Table;

干活规律

那么该babel插件是怎么工作的啊?让我们从官方文书档案入手:

GitHub – gajus/babel-plugin-react-css-modules: Transforms styleName to
className using compile time CSS module
resolution.

小编不才 ,稍作翻译如下:
一.
营造各种文件的具备样式表导入的目录(导入具备.css.scss扩充名的公文)。

  1. 使用postcss
    解析相称到的css文件
  2. 遍历全体
    JSX
    成分注明
  3. styleName 属性解析成无名氏和命名的壹对css模块引用
  4. 搜寻与CSS模块引用相相配的CSS类名称:
    * 如果styleName的值是一个字符串字面值,生成一个字符串字面值。
    *
    借使是JSXExpressionContainer,在运转时利用helper函数来创设就算styleName的值是一个jSXExpressionContainer,
    使用协理函数([getClassName]在运行时组织className值。
  5. 从要素上移除styleName属性。
    七.
    将扭转的className充足到现有的className值中(假若不设有则开创className属性)。

行使实例

在成熟的类型中,一般都会用到CSS预处理器只怕后Computer。

这里以使用了stylusCSS预管理器为例子,大家来看下怎样行使。

  • 设置正视

Shell

npm install -save-dev sugerss babel-plugin-react-css-modules

1
npm install -save-dev sugerss babel-plugin-react-css-modules
  • 编写Webpack配置
JavaScript

// webpack.config.js module: {   loaders: \[{     test: /\\.js?$/,
    loader: \[\['babel-plugin-react-css-modules',{
          generateScopedName:'\[name\]\_\_\[local\]',
          filetypes: {               ".styl": "sugerss"            }
     }\]\]   }, {     test: /\\.module.styl$/,     loader:
'style!css?modules&localIdentName=\[name\]\_\_\[local\]!styl?sourceMap=true'
  }, {     test: /\\.styl$/,     loader:
'style!css!styl?sourceMap=true'   }\] }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-18">
18
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6729d9ed4116610999-1" class="crayon-line">
// webpack.config.js
</div>
<div id="crayon-5b8f6729d9ed4116610999-2" class="crayon-line crayon-striped-line">
module: {
</div>
<div id="crayon-5b8f6729d9ed4116610999-3" class="crayon-line">
  loaders: [{
</div>
<div id="crayon-5b8f6729d9ed4116610999-4" class="crayon-line crayon-striped-line">
    test: /\.js?$/,
</div>
<div id="crayon-5b8f6729d9ed4116610999-5" class="crayon-line">
    loader: [['babel-plugin-react-css-modules',{
</div>
<div id="crayon-5b8f6729d9ed4116610999-6" class="crayon-line crayon-striped-line">
          generateScopedName:'[name]__[local]',
</div>
<div id="crayon-5b8f6729d9ed4116610999-7" class="crayon-line">
          filetypes: {
</div>
<div id="crayon-5b8f6729d9ed4116610999-8" class="crayon-line crayon-striped-line">
              &quot;.styl&quot;: &quot;sugerss&quot;
</div>
<div id="crayon-5b8f6729d9ed4116610999-9" class="crayon-line">
           }
</div>
<div id="crayon-5b8f6729d9ed4116610999-10" class="crayon-line crayon-striped-line">
     }]]
</div>
<div id="crayon-5b8f6729d9ed4116610999-11" class="crayon-line">
  }, {
</div>
<div id="crayon-5b8f6729d9ed4116610999-12" class="crayon-line crayon-striped-line">
    test: /\.module.styl$/,
</div>
<div id="crayon-5b8f6729d9ed4116610999-13" class="crayon-line">
    loader: 'style!css?modules&amp;localIdentName=[name]__[local]!styl?sourceMap=true'
</div>
<div id="crayon-5b8f6729d9ed4116610999-14" class="crayon-line crayon-striped-line">
  }, {
</div>
<div id="crayon-5b8f6729d9ed4116610999-15" class="crayon-line">
    test: /\.styl$/,
</div>
<div id="crayon-5b8f6729d9ed4116610999-16" class="crayon-line crayon-striped-line">
    loader: 'style!css!styl?sourceMap=true'
</div>
<div id="crayon-5b8f6729d9ed4116610999-17" class="crayon-line">
  }]
</div>
<div id="crayon-5b8f6729d9ed4116610999-18" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

  • 零件写法

JavaScript

import React from ‘react’; import ‘./table.module.styl’;   class Table
extends React.Component {     render () {         return <div
styleName=’table’>         </div>;     } }   export default
Table;

1
2
3
4
5
6
7
8
9
10
11
import React from ‘react’;
import ‘./table.module.styl’;
 
class Table extends React.Component {
    render () {
        return <div styleName=’table’>
        </div>;
    }
}
 
export default Table;

如上,你能够由此计划Webpack中module.loaders的test路线Webpack-module-loaders-configuration,来差距样式文件是或不是供给CSS模块化。
搭配sugerss这个postcss插件作为stylus的语法加载器,来支撑babel插件babel-plugin-react-css-modules的语法解析。

末段我们回过头来看下,大家React组件只要求把className换成styleName,搭配以上营造配置,就可以达成CSS模块化

最后

CSS Modules 很好的消除了 CSS 近来面临的模块化难点。扶助与
CSS管理器搭配使用,能丰盛利用现存技巧积存。假如您的制品中恰恰超越类似难题,11分值得1试。

但愿大家都能写出健康并且可扩充的CSS,以上。

1 赞 2 收藏
评论

皇家赌场手机版 5

相关文章

Leave a Comment.