Как импортировать CSS из node_modules в приложение webpack angular2

Скажем, что мы начинаем со следующего стартового пакета: https://github.com/angularclass/angular2-webpack-starter

После npm install и npm run start все работает нормально.

Я хочу добавить внешний модуль css, например bootstrap 4 css (и только css). (Я знаю, что в bootstrap есть загрузочный загрузчик, но теперь я прошу об общем решении, поэтому, пожалуйста, подумайте о загрузке 4 здесь, так как это может быть любой другой модуль css, доступный через npm).

Я устанавливаю bootstrap через npm: npm install [email protected] --save

Сначала я подумал, что достаточно добавить import 'bootstrap/dist/css/bootstrap.css'; в файл vendor.browser.ts.

Но это не так.

Что делать, чтобы иметь правильное решение?

Решения, о которых я не прошу:

  • "Скопируйте внешний модуль css в папку с ресурсами и используйте его оттуда"
    • Я ищу решение, которое работает вместе с пакетом npm.
  • "Использовать загрузочный загрузчик для webpack"
    • Как я описал выше, я ищу общее решение, bootstrap - только пример.
  • "Использовать другой стек"
    • Я ищу решение в точном стартовом пакете, о котором я упомянул выше.

Ответы

Ответ 1

Вы не сможете импортировать какой-либо css в файл поставщиков с помощью этого стека без внесения каких-либо изменений.

Почему? Хорошо, потому что эта строка:

import 'bootstrap/dist/css/bootstrap.css';

Он импортирует ваш CSS только как строку, когда на самом деле то, что вы хотите, это ваш css поставщика в теге стиля. Если вы проверите config/webpack.commons.js, вы найдете это правило:

 {
   test: /\.css$/,
   loaders: ['to-string-loader', 'css-loader']
 },

Это правило позволяет вашим компонентам импортировать файлы css, в основном это:

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css' // this why you import css as string
  ],

В AppComponent нет инкапсуляции из-за этой строки encapsulation: ViewEncapsulation.None,, что означает, что любые правила css будут применяться глобально к вашему приложению. Таким образом, вы можете импортировать стили bootstrap в свой компонент приложения:

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css',
    '../../node_modules/bootstrap/dist/css/bootstrap.css'
  ],

Но если вы настаиваете на импорте на ваш vendor.ts, вам нужно будет установить новый загрузчик, npm i style-loader --save-dev это позволит webpack вводить css на вашу страницу. Затем вам нужно создать определенное правило на вашем webpack.common.js и изменить существующее:

 { //this rule will only be used for any vendors
   test: /\.css$/,
   loaders: ['style-loader', 'css-loader'],
   include: [/node_modules/]
 },
 {
   test: /\.css$/,
   loaders: ['to-string-loader', 'css-loader'],
   exclude: [/node_modules/] //add this line so we ignore css coming from node_modules
 },

Правило firs будет применяться только при попытке импортировать css из любого пакета внутри node_modules, второе правило будет применяться к любому css, который вы импортируете извне node_modules

Ответ 2

Это возможно, используя @import '~bootstrap/dist/css/bootstrap.css'; в файле styles.css. (Обратите внимание на ~)