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文件并构建包含所有样式的单个CSS文件来获取main.css在所有必需的模块中，以便我可以将这个单个css文件附加到我想要的位置。

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

有没有办法实现这个目标？要将所有依赖项放在一个文件中？或者可以将“package.json”东西用于可以声明CSS依赖项的每个模块？

Answer 1

在浏览器中玩了一下之后，结果变换函数钩子显示了每个所需文件的文件名。我基本上寻找css和less文件，为它们返回一个空模块，并将每个文件保存在引用数组中。

捆绑完成后，通过收听捆绑事件，我创建了一个字符串，其中我基本上＆＃34;包括＆＃34;我在参考数组中捕获的每个文件。

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

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

有没有办法使用browserify基于javascript组件中所需的css构建主css文件？

1 个答案: