有没有一种方法可以使用 browserify 根据 javascript 组件中所需的 css 构建主 css 文件？

Question

假设我有与此类似的模块：

"use strict";

var moduleCss = require("module1.css");
var template = require("module1.hmtl");

module.exports = function(){
   //my module code here
};

另一个文件有不同的 css。

"use strict";

var moduleCss = require("module2.css");
var template = require("module2.hmtl");

module.exports = function(){
   //my module code here
};

主文件如下所示：

"use strict";

var module1 = require("module1");
var module2 = require("module2");
var normalize = require("normalize.css");
var bootstrap = require("bootstrap.css"); 

module.exports = function(){
   //my module code here
};

我不想将每个 css 文件内容附加为样式标签，而是希望在构建主包时通过查看每个必需的 css 文件来获得 main.css每个模块并构建一个单独的 CSS 文件，其中包含所有必需模块中的所有样式，以便我可以将这个单独的 css 文件附加到我想要的位置。

我基本上是在尝试将 css 要求与 js 和 html 要求放在同一位置。到目前为止我找到的解决方案需要一个不同的 CSS 文件来跟踪每个模块 css 依赖关系，因此在我的应用程序中添加或删除一个模块需要在 2 个文件中工作，主要的 js 和主要的css。

有办法实现吗？将所有依赖项放入一个文件中？或者可以为每个可以声明 CSS 依赖项的模块使用 "package.json" 东西吗？

Answer 1

在浏览了一些 browserify 之后，转换函数挂钩显示了每个所需文件的文件名。我基本上是在寻找 css 和 less 文件，return 为他们寻找一个空模块，并将每个文件保存在一个引用数组中。

捆绑完成后，通过监听捆绑事件，我创建了一个字符串，基本上 "included" 我在引用数组中捕获的每个文件。

创建导入文件后，我只是将其传递给 less 编译器。

这是我当前任务的要点link：https://gist.github.com/vladnicula/fd1ff7b30ef20789e1dc

有没有一种方法可以使用 browserify 根据 javascript 组件中所需的 css 构建主 css 文件？

Is there a way to build a master css file based on required css in javascript components using browserify?

browserify