时间戳

首页 > 解决方案 > 未加载 css，因为它在 Meteor JS 中的 MIME 类型

javascript - 未加载 css，因为它在 Meteor JS 中的 MIME 类型

问题描述

我有流星 js 1.8 应用程序，我已经做了一个布局，我想为那个布局添加 css。我有这样的结构：

进口

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

所以我把所有的css放在stylesheetsimports下的文件夹中。现在一个名为main_layout.html' and correspondingmain_layout.js andmain_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'

我有一个渲染此布局的流路由器规则：

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 文件依此类推。那么我如何使用 import 加载 css 呢？

标签： javascriptjquerycssnode.jsmeteor

解决方案

欢迎来到 SO！

MIME 类型错误消息只是浏览器尝试获取服务器未找到的 CSS 文件并返回 HTML 页面的症状。对于 Meteor 应用程序，未找到的文件通常会被您的主页替换。

请参阅Refused to apply style from '' 因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查

在您的特定情况下，您只需要意识到@import您的 CSS 不会被您的 Meteor CSS 包处理：它在您的 CSS 规则中按原样复制。因此，这就是您的浏览器所看到的，它会请求指定的路径。一个简单的解决方法是，例如将您的供应商 CSS 放置在您的项目public文件夹中，就像静态资产一样，然后继续导入它，但使用正确的路径，例如：

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

（假设您将供应商文件放在public/stylesheets/bootstrap.min.css）

您还有其他可能的解决方案，通常通过在您的 JS 文件中引用它们来导入每个 CSS 文件，就像您为条目 CSS 文件所做的那样，或者使用不同样式的编译包来处理导入（例如，meteor sass）。

推荐阅读