Используйте компоненты дизайна материала с ember-cli-sass

Я пытаюсь использовать функциональность sass Material Components Web(MDC-Web) с помощью ember-cli-sass. Я установил MDC-Web с помощью пряжи

В моем файле ember-cli-build.js я установил свой sass includePaths так:

 sassOptions: {
           includePaths: ['node_modules/material-components-web','node_modules/@material']      
    }

а затем в моем файле app.scss попытался импортировать полную библиотеку компонентов следующим образом:

@import "material-components-web";

Однако я получаю ошибку:

Ошибка: ошибка: файл для импорта не найден или не читается: @ материал / кнопка /mdc-button.

Почему компилятор SASS не находит его?

Источник

2 ответа

Решение

Эта проблема меня тоже задела, когда я начинал. Я использую его в своем приложении ember в течение нескольких месяцев, и это то, что работает для меня в моем app.scss

// Parent MDC Theming example

$mdc-theme-primary: #009688;
$mdc-theme-secondary: #00bcd4;
$mdc-theme-background: #fff;

@import "material-components-web/material-components-web";

// Overrides to follow example

.mdc-grid-tile__secondary{
    background-color: rgba(0, 150, 136, 0.75);
}
.mdc-list-item{
    white-space: unset;
    overflow: visible;
}

И в Эмбер-Кли-билде

sassOptions: {
  includePaths: [
    'node_modules'
  ]
}
Источник

В ember вы должны импортировать зависимости, которые не являются аддонами ember, в ember-cli.build.js, См. https://guides.emberjs.com/v2.18.0/addons-and-dependencies/managing-dependencies. Начиная с версии 2.15 также возможно импортировать из node_modules ( https://discuss.emberjs.com/t/import-javascripts-from-node-modules-packages/13606).

Но в случае material-components-web это не должно быть необходимым вообще. Вместо этого вы можете просто использовать ember addon https://github.com/secondstreet/ember-material-components-web, который включает material-components-web для тебя.

Источник
Другие вопросы по тегам