用JSPM模块化CSS

提到 jspm 在模块化 CSS 上的尝试。

现在，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 的插件，我们都可以使用，具体用法见文档说明。