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

Question

大家。 我有手写笔导入问题。 在我的项目中，我正在使用这种导入方法： @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字体大小...

如果有人知道如何从分支结束到开始更改订单，请告诉我如何制作它。

Answer 1

问题

Stylus导入文件的顺序错误。


原因

在Stylus中使用 File Globing 时，**/* 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
...