2-компонентные стили Angular не разрешают импорт CSS из node_modules

Question

2-компонентные стили Angular не разрешают импорт CSS из node_modules

1

Основываясь на документации, найденной в разделе " Угловые компоненты", я пытался импортировать таблицы стилей, найденные в узле node_modules; то есть:

test.component.css:

@import '~@angular/material/core/theming/all-theme.css';

При этом компонент определяется:

@Component({
    moduleId: module.id,
    selector: 'app-test',
    templateUrl: 'test.component.html',
    styleUrls: ['test.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class TestComponent {
}

К сожалению, когда вы просматриваете страницу, выясняется, что файл ~@angular/material/core/theming/all-theme.css не найден.

Этот проект был создан с использованием Angular-Cli.

Я полагаю, что я мог бы копировать в стилях и ссылаться на них таким образом, но я предпочел бы сохранить зависимости библиотек отдельно.

Robert Colfin 10 июнь 2017, в 20:05

Источник

Теги:

angular

javascript

css

2 ответа

Ещё вопросы

Ashwani Kumar · Answer 1 · 2017-06-10T16-30-00.000Z

Если вы хотите включить любую таблицу стилей из папки узла узла, вам просто нужно добавить ее в.angular-cli.json

 "styles": [
    "../node_modules/bootstrap/scss/bootstrap.scss"
]

Также вам не нужно добавлять encapsulation:ViewEncapsulation.None пока вы не encapsulation:ViewEncapsulation.None свой html динамически с помощью какого-либо стороннего плагина или не добавите случайный css.

вы всегда можете использовать глобальные css, которые включены в ваш.angular-cli.json

Это правильно. Вы также можете импортировать стиль в styles.css
Похоже, что обновление до angular-cli v1.1.2 исправило его без необходимости изменять .angular-cli.json, хотя я тоже это попробовал. Я все еще нахожу, что мне нужно использовать ViewEncapsulation.None, иначе импортируемые классы не разрешаются, когда я добавляю их в classList элемента.

Omkar Yadav · Answer 2 · 2017-06-11T02-34-00.000Z

Проблема заключается в расширении файла. Вы используете расширение css которое не поддерживает импорт файла из другого места, лучше, чем вы можете изменить расширение на scss. В этом случае вы можете импортировать файлы из node_modules.

В веб-пакете, когда css импортирует любой файл, он интерпретируется как URL, а если вы используете scss, то файл импортируется как style-loader . Означает, что он загружает файл, а не только URL.