Интеграция SASS / SCSS в Ember Project со структурой POD - PullRequest
Новая
       21

Интеграция SASS / SCSS в Ember Project со структурой POD

3 голосов
/ 11 апреля 2019

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

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

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

Тогда в app.scss импортированные стили выглядят так 

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

Ответы [ 3 ]

2 голосов
/ 11 апреля 2019

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

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

Так как у нас есть app.scss - (вы сказали, что используете sass) - / это своего рода индекс.

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

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

Есть это - https://github.com/justtal/ember-cli-sass-pods - но это 4 годаold / (но также и pods) - так что, он все равно мог бы отлично работать.

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

В моем случае / мне на самом деле нравится для использования каскада - и мне нужнофайлы ко всем должны быть объединены - по порядку.У меня не может быть этого в файле вендора.

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

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

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

¯\_(ツ)_/¯

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

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

https://discuss.emberjs.com/

0 голосов
/ 12 апреля 2019

Кроме 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 автоматически будут пространствами имен.

0 голосов
/ 11 апреля 2019

  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. Активы и зависимости
...