解析NodeJS CSS子包?

时间:2018-01-21 05:19:59

标签: javascript css node.js postcss postcss-import

我正在创建CSS library,我希望以与RxJS相同的方式支持子包。例如,对于RxJS,我们可以像这样导入整个厨房水槽(取自https://www.npmjs.com/package/rxjs):

var Rx = require('rxjs/Rx'); 
Rx.Observable.of(1,2,3); // etc

或者这样的个体经营者:

var Observable = require('rxjs/Observable').Observable;
// patch Observable with appropriate methods
require('rxjs/add/observable/of');
require('rxjs/add/operator/map');

我最初的观察是,这可能就像将模块打包在根模块的子文件夹中一样简单。例如,RxJS node_modules安装文件夹包含子文件夹rxjs/add/observable,其中包含zip.js, throw.js...等所有可观察的扩展名。

因此,遵循此模式可以扩展postcss-import以相同的方式解析子模块文件夹中的导入。例如:

  • @import @superflycss/utilities-layout/margins

会导入node_modules/superflycss/utilities-layout/margins.css,如果不存在,它会查找node_modules/superflycss/utilities-layout/margins/index.css,如果不存在,则会抛出错误。

  • @import @superflycss/utilities-layout/margins/

仅导入node_modules/superflycss/utilities-layout/margins/index.css

我生产的模块已将厨房水槽打包在目录target/main/css/index.css中。这将公开所有css实用程序或组件(取决于它的模块类型)。

问题是,与RxJS一样,这可能是一个非常繁重的文件(例如,包含对所有Google字体的导入)。

所以我希望通过遵循RxJS方法,遵循NodeJS要求的相同规则,整个事情变得更加灵活和标准化.resolv()算法使用。想法?

1 个答案:

答案 0 :(得分:0)

PostCSS支持以与RxJS相同的方式导入子模块。我添加了一个带有测试用例的拉取请求,说明了它是如何完成的here