Total Pageviews

Tuesday 30 August 2016

用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