CSS не был загружен, потому что его MIME-тип в Meteor JS - PullRequest
Новая
       9

CSS не был загружен, потому что его MIME-тип в Meteor JS

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

У меня есть приложение meteor js 1.8, я сделал макет, и для этого макета я хочу добавить css.У меня есть такая структура:

import 

-ui
--stylesheets
--bootstrap.min.css
--font-awesome.min.css
--skins.css
--forms.css

Итак, я поместил все CSS в папку stylesheets при импорте.Теперь макет с именем main_layout.html' and corresponding main_layout.js and main_layout.css`, которые я помещаю в файлы: 

-ui
--layouts
---dashboard
---main_layout.html
---main_layout.js
---main_layout.css

Итак, я импортирую все импорта в main_layout.css следующим образом: 

@import '{}/imports/ui/stylesheets/bootstrap.min.css';
@import '{}/imports/ui/stylesheets/font-awesome.min.css';
@import '{}/imports/ui/stylesheets/skins.css';
@import '{}/imports/ui/stylesheets/forms.css';

И я импортировал main_layout.css в main_layout.js: 

import './main_layout.html'
import './main_layout.css'

У меня есть правило для flow-router, которое отображает этот макет: 

import '../../ui/layouts/dashboard/main_layout'

FlowRouter.route('/', {
    name: 'App.home',
    action() {
    BlazeLayout.render('mainLayout', {main: ''});
    },
});

Но когда я посещаюlocalhost: 3000 / я получаю сообщение об ошибке в консоли браузера:

Таблица стилей http://localhost:3000/%7B%7D/imports/ui/stylesheets/bootstrap.min.css не была загружена, поскольку ее MIME-тип «text / html» не является «text / css».

И так далее для остальных файлов CSS.Как я могу загрузить CSS, используя импорт?

Ответы [ 2 ]

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

удалить @ и использовать с. для публичных файлов, как показано ниже: 

import './stylesheets/bootstrap.min.css';
0 голосов
/ 03 апреля 2019

Добро пожаловать в ТАК!

Сообщение об ошибке MIME-типа является лишь признаком того, что ваш браузер пытается извлечь файл CSS, который ваш сервер не находит, и вместо этого возвращает страницу HTML. В случае приложения Meteor не найденный файл обычно заменяется главной страницей.

См. Отказался от применения стиля из '', поскольку его тип MIME ('text / html') не является поддерживаемым типом MIME таблицы стилей, и включена строгая проверка MIME

В вашем конкретном случае вам просто нужно понять, что @import в вашем CSS не обрабатывается вашим пакетом Meteor CSS: он копируется как есть в ваших правилах CSS. Поэтому это то, что видит ваш браузер и запрашивает указанный путь. Простой обходной путь - например, поместить CSS поставщика в папку проекта public, как статический ресурс, и продолжить его импорт, но с исправленным путем, например: 

@import '/stylesheets/bootstrap.min.css';

(при условии, что вы поместили файл поставщика в public/stylesheets/bootstrap.min.css)

У вас также есть другие возможные решения, обычно импортирующие каждый CSS-файл, ссылаясь на них в своем JS-файле, как вы делали для входного CSS-файла, или используя другой пакет компиляции стилей, который обрабатывает импорт (например, meteor sass).

...