Я использую Webpack с html-webpack-plugin , html-загрузчик , файл-загрузчик , style-loader , css-загрузчик и более.
Моя проблема связана с использованием файла css из open-iconic с этой настройкой. Если я попытаюсь написать тег <link..> в своем html-шаблоне, как предлагает открытый иконический веб-сайт , я получу сообщение об ошибке, говорящее, что это неверный тип MIME при попытке запустить вывод (с использованием визуального отладчик студийного кода):
<link rel="stylesheet" type="text/css" media="screen" href="./assets/font/css/open-iconic-bootstrap.css">
отказался применять стиль от
«http://localhost:8080/assets/open-iconic-master/font/css/open-iconic-bootstrap.css'
потому что его тип MIME ('text / html') не является поддерживаемой таблицей стилей MIME
тип, и строгая проверка MIME включена. [http://localhost:8080/]
Если вместо этого я попытаюсь удалить тег <link..> и вместо этого импортировать css в main.scss, как мы обычно делаем с пакетами веб-пакетов, он не скомпилируется. Причина в том, что он пытается найти файлы шрифтов, относящиеся к css относительно моего основного файла index.js, а не относительно папки, в которой находится css.
@import "./assets/open-iconic-master/font/css/open-iconic-bootstrap.css";
ОШИБКА в ./src/main.scss
(./Node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/sass-loader/lib/loader.js ?? ref - 5-3! ./ src / main.scss) Модуль не найден: Ошибка: невозможно разрешить '../fonts/open-iconic.eot' в
'C: \ Users ..... \ src' @ ./src/main.scss
(./Node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/sass-loader/lib/loader.js ?? ref - 5-3! ./ src / main.scss) 7: 106-141 7: 172-207 @ ./src/main.scss @ ./src/index.js @ multi
(webpack) -dev-сервер / клиент? http://localhost:8080 ./src/index.js
Идея, как обойти это, будет принята с благодарностью.
EDIT
Очень странно ... Изначально я импортировал файл css как часть в main.scss. Это вызывает вышеуказанную ошибку.
Когда я вместо этого импортировал его в main.js, он не выдал ошибку.
Не уверен, что именно здесь происходит. Если все css файлы будут импортированы в основной файл JS, вместо цепочки css файлов, где каждый @import с другой css?