css - 手写笔，子目录导入的正确顺序

大家
我有手写笔导入问题。
在我的项目中，我正在使用这种导入方法：
@import "project/**/*.styl"

我也有这个bem文件夹结构：

Project/ |- Project.styl |- Block1/ | |- Block1.styl | |- _Element1/ | | |- _Element1.styl | | |- __Modificator1/ | | | |- __Modificator1.styl |- Block2/ |- Block3/

通常，问题在于，当bundle.css准备就绪时，其中的样式将以错误的方式显示。首先是修饰符，然后是元素，然后才是块，因此修饰符总是被元素覆盖，并且最终它们不起作用...那看起来是我的代码：

HTML：

<div class="block1_element1 block1_element1__modificator1"></div>

CSS：

.block1_element1__modificator1{font-size: 14px}.block1_element1{font-size: 16px}

结果将是16px字体大小...

如果有人知道如何从分支结束到开始更改订单，请给我一些建议。

最佳答案

问题
手写笔导入文件的顺序错误。

原因
在Stylus中使用文件匹配时，即**/* Stylus引擎按名称对文件进行排序，因此导入文件的顺序依次为__Modificator(n).styl，_Element(n).styl，Block(n).styl，这当然是导致错误CSS样式的原因。

可能的解决方案
在每个目录/子目录中使用index.styl文件，在每个index.styl文件内部，导入当前目录中的所有文件，然后导入所有子目录的所有index.styl文件。

例
项目结构应如下所示：

Project/
 |- Project.styl
 |- Block1/
 | |- index.styl
 | |- Block1.styl
 | |- _Element1/
 | | |- index.styl
 | | |- _Element1.styl
 | | |- __Modificator1/
 | | | |- index.styl
 | | | |- __Modificator1.styl
 |- Block2/
 |- Block3/

这是index.styl文件中的内容

inside Project.styl
@import "Block1"
@import "Block2"
...

inside any Block directory index.styl file
@import "_Element1"
@import "_Element2"
@import "Block1.styl" // current parent block
...

inside any Element directory index.styl file
@import "__Modificator1"
@import "__Modificator2"
@import "_Element1.styl" // current parent Element
...

关于css - 手写笔，子目录导入的正确顺序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41074789/