Stylus, под заказ под заказ

Question

все. У меня проблема с импортом стилуса. В моем проекте I'am с использованием такого METHODE импорта: @import "project/**/*.styl"

А также у меня есть эта структура папок BEM:

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

В общем, проблема заключается в том, что, когда bundle.css готов , стили в нем идут не так. Во-первых, в это идет, затем модификаторы элементы и только тогда блоки, так Модификатор всегда перезаписывает элементами, и finnaly они не работают ... то, как выглядит мой код:

HTML:

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

CSS:

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

В результате будет 16px размер шрифта ...

Если кто-то знает, как изменить порядок от конца ветви до начала, пожалуйста, дайте мне совет, как сделать it.s

Answer 1

Проблема

Неправильный порядок Стилус импортировали файлы.


Причина

При использовании 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 
...