现在,jspm 贡献者已经完成这一功能,只待整合进 jspm。
来看看,jspm 里,要怎么使用这个功能。
安装 jspm-loader-css
在命令行下运行命令:
jspm install css=npm:jspm-loader-css
jspm 默认使用的 CSS 加载器是 plugin-css,上一条命令让 jspm-loader-css 取代 plugin-css,安装完成后,config.js 文件中
System.config
里的 map
下 css
条目变成:"css": "npm:jspm-loader-css@0.1.4"
模块 CSS 规则
假设模块保存在 Components/book 目录下,
- Components
- book
+ book.js
+ book.css
在 book.css 文件中,我们这样定义 CSS 模块:
:local(.book) { color: red; }
:local()
指定该样式类为局域样式。
当然,旧的写法仍然支持:
.test { color: red; }
这条规则表示
.test
在全局环境中均可以使用。使用 CSS 模块
在 book.js 文件中:
import styles from './book.css!css';
import React from 'react';
export default class extends React.Component {
render() {
return (
<li className={styles.book}>
</li>
);
}
};
这是一个 React.js 项目文件。
查看生成的页面,生成的
li
的 class 类名是 _Components_book_book__book
。
如果嫌 CSS 中总写
:local
麻烦,则可以使用另一个 CSS 加载器 jspm-loader-css-module,这个加载器默认所有的 CSS 类名是局域的,而非全局,使用它就不需要写 :local
。
最值得提及的一点是,jspm-loader-css 默认启用 autoprefixer,实际上,因为 jspm-loader-css 依赖 css-modules/css-modules-loader-core,而后者又是基于 postcss,所以 postcss 的插件,我们都可以使用,具体用法见文档说明。