用SystemJS 加载 CSS

说明：SystemJS & jspm 仍在开发中，所以各种接口可能会出现变化。

曾经介绍过，SystemJS 可以使用 css 插件加载 bootstrap 的 NPM 包中的 CSS 文件。那么，如果是我们自己写的 CSS 文件，比如 css 目录下的 app.css 文件，SystemJS 里要怎么​加载？

这里有个 SystemJS 的说不上是 bug 的 bug:
https://github.com/systemjs/plugin-css/issues/34

首先，css plugin 安装完后，在 config.js 里的 map 中是这样定义的：

"css": "github:systemjs/plugin-css@0.1.10",
这里，css 是模块名称，可以在我们的代码中使用，github:systemjs/plugin-css@0.1.10 是目录，指向 jspm_packages/github/systemjs/plugin-css@0.1.10。

如果我在 index.html 文件中这样加载 app.css 文件：

System.import('css/app.css!css');
这个加载路径会指向 http://localhost:3001/jspm_packages/github/systemjs/plugin-css@0.1.10/app.css。Oooops，import 语句里的第一个 css 被解析为 map 中定义的路径了。

目前来看，在开发者推出更佳解决办法前，只有用 workaround 了。

重命名 css 目录名称#

把 css 目录名改成其它，比如 mycss，记住，不要跟 map 里定义的任何模块名称冲突，否则又会出现上面的情况，然后在 index.html 中 import：

System.import('mycss/app.css!css');
配置 paths#

我们可以在 config.js 文件中配置一个 paths：

// 配置 CSS 文件路径
System.paths["mycss/*"] = "css/*.css";
注意，在 config.js 中，模块定义的路径，都是相对于 baseURL 的。

之后在 index.html 文件中加载：

System.import('mycss/app!css');
!css 表示该文件通过 css 插件加载，SystemJS 可以通过文件扩展名自动判断使用哪个插件 – 但建议指定使用的插件名称。

刷新页面，我们的 app.css 已经动态插入 head 部分了：

[resp_image id=’16084′ caption=” ]

修改 map 中定义的 key#

这一个方法，拿 config.js 里的 map 开刀。

把如下代码：

"css": "github:systemjs/plugin-css@0.1.10",
改成:

"style": "github:systemjs/plugin-css@0.1.10",
然后在 index.html 中加载：

System.import('css/app.css!style');
上面三种折衷办法中，最推荐第一个。

远程 CSS#

除了加载自有 CSS，我们还会加载 CDN 上的外部 CSS。

同样的，我们可以在 config.js 中预先定义一个 paths：

System.paths["purecss"] = "http://yui.yahooapis.com/pure/0.6.0/pure-min.css";
然后就可以在 index.html 文件中 import 了：

System.import('purecss!css)';
不过需要注意，从 CDN 上加载的文件，目前在跑 jspm bundle 时会报错.

SystemJS 路径配置项:
https://github.com/systemjs/systemjs