解析 NodeJS CSS 子包？

Posted 2023-03-06

【中文标题】解析 NodeJS CSS 子包？

【英文标题】：Resolving NodeJS CSS subpackages?

【发布时间】：2018-06-30 01:00:20

【问题描述】：

我正在创建一个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');

我最初的观察是，这可能就像将模块打包到根模块的子文件夹中一样简单。例如RxJSnode_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 的 require.resolv() 算法使用的相同规则，整个事情变得更加灵活和标准化。想法？

【问题讨论】：

你有没有尝试过？我认为这只是需要相对于 NPM 包的根目录的“厨房水槽”或子模块的问题。不确定 NPMs 算法与它有什么关系。

看看 RxJS 的安装副本（即在 node_modules 文件夹中），真的没有什么特别的。

确实 - 我更新了我的问题以反映您的反馈 - 谢谢。我认为这就像您的建议一样简单。

【参考方案1】：

PostCSS 确实支持导入子模块，就像 RxJS 一样。我添加了一个带有测试用例的拉取请求，说明了它是如何完成的here。