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

【问题标题】：css was not loaded because its MIME type in Meteor JS未加载 css，因为它在 Meteor JS 中的 MIME 类型
【发布时间】：2019-08-24 10:09:51
【问题描述】：

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

进口

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

所以我已将所有 css 放在导入下的 stylesheets 文件夹中。现在是一个名为 main_layout.html' and correspondingmain_layout.jsandmain_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.js 中导入了main_layout.css：

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 呢？

【问题讨论】：

标签： javascript jquery css node.js meteor

【解决方案1】：

欢迎来到 SO！

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

见Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

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

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

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

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

【讨论】：

【解决方案2】：

删除 @ 并使用 with 。对于公共文件，如下：

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

【讨论】：