Total Pageviews

Monday 29 August 2016

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