javascript - 解析 NodeJS CSS 子包?

标签 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 require.resolv() 算法使用的相同规则,整个事情变得更加灵活和标准化。想法?

最佳答案

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

关于javascript - 解析 NodeJS CSS 子包?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48363924/

相关文章:

javascript - 如果输入有带有文本缩进的隐藏文本,jquery 滚动鼠标滚轮

javascript - 你如何在 Rails html.erb 文件中的 ruby​​ if/else 循环中执行一些 jQuery?

css - 悬停时调整 SVG 圆圈大小溢出 : hidden issue

html - 如何使容器之间的图像居中?

javascript - 如何使用 socket.io 设置和读取 cookie?

javascript - 多系列导出在 Highcharts 中未对齐

html - 文本溢出和向右浮动的问题

node.js - 使用 Node Js 将普通图像转换为渐进图像

javascript - 如何方便地将 MySQL 查询作为参数插入 Javascript 函数?

javascript - 动态强制 2 个 div 成为较大 div 大小的 CSS/JavaScript 技术