Блог

Я просто хочу спросить, какой наилучший подход для интеграции sass/scss в проект ember?

В настоящее время мой проект находится в pod структуре, и я просто импортирую style.scss в main app.scss в папке styles. Это нормально или есть лучший подход?

 --- app
---- pods
------- home
---------- template.hbs
---------- controller.js
---------- style.scss
---- styles
------- app.scss
  

Затем в app.scss импортированных стилях выглядит следующим образом

 @import "./app/pods/home/style.scss";
  

Я годами не использовал pods — потому что (например, ожидая удаления контроллеров) — мне сказали, что будет новая система компоновки файлов. С тех пор, как я услышал это / я слышал обрывки разговоров, которые заставили меня поверить, что pods на самом деле не подходят для новых проектов.

При этом я разделяю ваше желание иметь хорошую файловую структуру. Я бы хотел «перетащить» папку из одного проекта в другой / и просто скопировать все части компонента.

Поскольку у нас есть app.scss — (вы сказали, что используете sass) — /, который вроде как действует как индекс.

Я включаю сброс и микширование и кучу всего для настройки. — итак, на самом деле это не подиш … и, возможно, есть макет на уровне страницы … который тоже не подходит… — итак, все сводится к тому, что это действительно «компоненты», верно?

ember-component-css довольно крут, но у него также есть некоторые мнения, которые могут противоречить.

Там это — https://github.com/justtal/ember-cli-sass-pods — но ему уже 4 года / (но и стручкам тоже) — так что, возможно, он все еще отлично работает.

Потому что здесь нет действительно четкого пути… Я просто создаю папку компонентов в styles/components/component-name.styl -, а затем в моем styles/components.styl I @import 'component-name.styl -, а затем в моем app.styl I импортирую компоненты…

В моем случае / мне действительно нравится использовать каскад — и мне нужно, чтобы все файлы были объединены — по порядку. Я не могу иметь некоторые из них в файле поставщика.

Это не идеально (просто потому, что я должен явно создавать каждый файл и регистрировать его), но я не могу позволить себе просто продолжать желать лучшего расположения файлов.

Вместо нечеткого поиска component-name > template

Я просто ищу template > component-name

¯_(ツ)_/¯

Интересно, какой стиль причинит мне меньше боли при будущих переходах. Они предложат codemods, чтобы помочь / но они не могут учитывать уникальные конфигурации.

Я бы предложил задать этот вопрос на официальном форуме обсуждения. Там вы получите реальные ответы. : )

https://discuss.emberjs.com/

1. app/styles каталог — это дом для таблиц стилей, таких как CSS, SASS или LESS.

2. Папки, подобные vendor и public которые также могут содержать много других файлов developer's choice .

3. Итак, в вашем случае, если вы хотите иметь отдельный scss файл для каждого pod ,

   • вы можете поместить его в указанное вами место. (иначе)
   • установите его app/styles/pod1.scss и импортируйте в соответствии .ember-cli-build.js с -> app.import('app/styles/pod1.scss')

[Ссылки]

Вы можете получить подробное представление о макетах проекта, компиляции таблиц стилей, активах и зависимостях ниже

1. Макеты проекта
2. Компиляция таблиц стилей
3. Активы и зависимости

Кроме ember-component-css того, есть ember-css-modules . Оба дополнения пытаются достичь примерно одной и той же цели, однако я действительно предпочитаю ember-css-modules .

У этого аддона есть вызываемый аддон ember-css-modules-sass . Оба вместе позволят вам легко записать один файл sass для каждого компонента.

Вы просто помещаете styles.scss файл в свой модуль компонентов ( app/components/my-component/styles.scss и затем используете local-class="my-class" вместо class="my-class" в своем шаблоне.

Ваши классы в вашем scss будут автоматически пространствами имен.