>

用法教程

- 编辑:至尊游戏网站 -

用法教程

CSS Modules 入门及 React 中实践

2017/03/25 · CSS · React

原稿出处: AlloyTeam   

CSS Modules 用法教程

2016/06/19 · CSS · Modules

原作出处: 阮一峰   

学过网页开荒就能够通晓,CSS 无法算编制程序语言,只是网页样式的豆蔻梢头种描述方法。

为了让 CSS 也能适用软件工程措施,程序猿想了各样艺术,让它变得像一门编制程序语言。从最先的Less、SASS,到后来的 PostCSS,再到近年来的 CSS in JS,皆认为了化解那个标题。

图片 1

本文介绍的 CSS Modules 有所区别。它不是将 CSS 改形成编制程序语言,而是功用很单纯,只参预了意气风发部分功效域和模块依赖,那刚刚是网页组件最亟需的功效。

于是,CSS Modules 超轻巧学,因为它的平整少,同不时间又特别有用,能够保险某些组件的样式,不会默化潜移到此外零件。

图片 2

写在前边

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

图片 3

翻阅本文须要 11m 24s。

零、示例库

本身为这几个科目写了贰个示例库,满含八个德姆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

张开浏览器,访谈

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类名接收器节制功效域的风流倜傥种方法(通过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的平整都以大局的,任何一个零件的体裁法规,都对一切页面有效。

发生一些成效域的独一格局,便是接受二个天下无敌的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;
}

那样一来,那几个类名就改为绝无只有了,只对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 功用。

今昔,运维这么些德姆o。

JavaScript

$ npm run demo01

1
$ npm run demo01

打开 ,能够旁观结果,h1标题突显为石磨蓝。

为啥大家须求CSS模块化

二、全局功用域

CSS Modules 允许使用:global(.className)的语法,声喜宝(Hipp)个大局法规。凡是那样注解的class,都不会被编写翻译成哈希字符串。

App.css加盟三个大局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;
}

CSS全局功效域难点

CSS的准绳都是大局的,任何四个组件的体制法规,都对一切页面有效。相信写css的人都会超越样式冲突(污染)的难题。

于是乎常常这么做(小编都做过):
* class命名写长一点啊,减弱冲突的可能率
* 加个父成分的接纳器,限定范围
* 重新命名个class吧,相比保证

因此亟待消除的主题素材正是css局地作用域制止全局样式冲突(污染)的难题

三、定制哈希类名

css-loader默许的哈希算法是[hash:base64],这会将.title编译成._3zyde4l1yATCOkgn-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被编写翻译成了demo03-components-App—title—GpMto。

JS CSS不恐怕共享变量

复杂组件要选拔 JS 和 CSS 来协作管理体制,就能够招致有个别变量在 JS 和 CSS 中冗余,CSS预管理器/后管理器 等都不提供跨 JS 和 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;
}

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

完备而且增添方便的CSS

作为有追求的程序员,编写强壮并且扩充方便的CSS一贯是大家的靶子。那么哪些定义强壮何况扩张方便?有四个要点:

  • 面向组件 – 管理 UI 复杂性的特级推行正是将 UI 分割成叁个个的小组件 Locality_of_reference 。假若你正在选拔二个理当如此的框架,JavaScript 方面就将原生协助(组件化)。比方,React 就鼓舞中度组件化和撤销合并。大家期望有一个 CSS 架构去相称。
  • 沙箱化(Sandboxed) – 要是二个零部件的体制会对别的零件爆发不必要甚至意外的熏陶,那么将 UI 分割成组件并从未什么样用。就那上头来讲,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

打开

CSS模块化方案分类

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

CSS 命名约定

规范化CSS的模块化技术方案(比如BEM BEM — Block Element Modifier,OOCSS,AMCSS,SMACSS,SUITCSS)
但存在以下难题:
* JS CSS之间依然未有开掘变量和采纳器等
* 复杂的命名

CSS in JS

干净扬弃 CSS,用 JavaScript 写 CSS 法规,并内联样式。 React: CSS in JS // Speaker Deck。Radium,react-style 属于那后生可畏类。但存在以下难点:
* 不可能利用伪类,媒体询问等
* 样式代码也会并发大量再一次。
* 无法使用成熟的 CSS 预管理器(或后Computer)

利用JS 来治本体制模块

动用JS编译原生的CSS文件,使其独具模块化的工夫,代表是 CSS Modules GitHub – css-modules/css-modules: Documentation about css-modules 。

CSS Modules 能最大化地组合现存 CSS 生态(预管理器/后计算机等)和 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 名基本正是不今不古的,大大减少了项目中样式覆盖的可能率。同一时间在生产情形下改善准则,生成越来越短的 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

若果您不想频仍的输入 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.

笔者不才 ,稍作翻译如下:
1. 创设各类文件的持有样式表导入的目录(导入具备.css.scss增加名的文件)。

  1. 使用postcss 分析相配到的css文件
  2. 遍历全体 JSX 成分注解
  3. styleName 属性解析成无名氏和命名的局地css模块引用
  4. 找寻与CSS模块引用相相称的CSS类名称:
    * 如果styleName的值是四个字符串字面值,生成三个字符串字面值。
    * 假如是JSXExpressionContainer,在运行时利用helper函数来塑造纵然styleName的值是贰个jSXExpressionContainer, 使用扶植函数([getClassName]在运作时组织className值。
  5. 从要素上移除styleName属性。
    7. 将转换的className加上到现成的className值中(如若不设有则开创className属性)。

采取实例

在成熟的门类中,常常都会用到CSS预管理器也许后计算机。

这里以应用了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管理器搭配使用,能丰富利用现存技艺积淀。假诺你的成品中恰恰碰见相像主题素材,非常值得风流罗曼蒂克试。

盼望我们都能写出健康而且可扩展的CSS,以上。

1 赞 2 收藏 评论

图片 5

本文由设计建站发布,转载请注明来源:用法教程