1 min read

JSPM 模块化 CSS

之前我写过两篇模块化 CSS 的内容:

  1. 当下前端界在模块化 CSS 上的种种尝试
  2. React.js 中内联 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 里的 mapcss 条目变成:

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

报告问题 修订