拒绝应用样式表 ''，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

Question

我有一个Vue.js项目，当我检查控制台时，发现以下问题：

拒绝应用来自'http://localhost:8080/dist/cropper.min.css'的样式，因为其MIME类型('text/html')不是受支持的样式表MIME类型，并启用了严格的MIME检查。

---

我在SO上搜索了一下，找到了一个Angular相关的帖子，但是它对我没有帮助，因为这两个都基于不同的前端框架。

- user7693832

---

我有同样的问题 - 你解决了吗？ - BispensGipsGebis

看这里。这个答案帮了我很多。 - Dmitriy Bobrovskiy

Answer 1

出现这种错误消息的常见原因是，当浏览器尝试加载资源时，服务器返回一个HTML页面，例如如果您的路由器捕获未知路径并显示默认页面而不是404错误。当然这意味着该路径不会返回预期的CSS文件/图像/图标/等。

要确保您处于这种情况，请复制该路径并在新的浏览器窗口或选项卡中直接访问它。您将看到服务器发送的内容。

解决方案是找到正确的路径和路由器配置，以便在访问该路径时获取纯CSS文件/图像等。

确切的路径和路由器配置取决于您如何设置项目以及您正在使用的框架。

- ghybs

Answer 2

您提供的信息不足。但是我遇到了同样的问题，所以我有一个解决方案。

假设您在组件的样式块中导入了CSS文件。我的问题出在我指定的路径上。错误消息“拒绝应用样式”是因为路径错误引起的。我认为我的src路径别名“~”是在样式块中解析的，但事实并非如此。

我所要做的就是指定"/src/assets/css..."而不是"~/assets/css..."

- Alex Freshmann

Answer 3

我遇到了完全相同的问题：“http://localhost:8080/css/formatting.css”因其MIME类型为“application/json”，不是受支持的样式表MIME类型而被拒绝应用样式...

我浏览了一下Windows资源管理器，按照我打算的修正了文件路径（文件夹）。在地址中还有一个拼写错误，像上面的路径名为formatting.css或包含两个T，但实际文件名为formating.css或只有一个T，这就解决了问题。有些解决方案根本不需要花费很多钱。谢谢。

- ashenafi duressa

Answer 4

你需要将你的css文件放到assets目录下，路径为 assets/style.css。

然后在你的index.html文件中加入这些路径：src/index.html。

<link rel="stylesheet" type="text/css" href="assets/style.css" />

此外，您还需要修改angular.json文件中的styles部分。最初的回答中已经提到了这一点。

"styles": [
              "src/assets/style.css",
              "./node_modules/materialize-css/dist/css/materialize.min.css",
            ],

- ricnef2121

---

这个方法也可以正常运行。如果你在HTML文件中使用声明：写“/assets/styles.css”（或“/assets/styles.scss”）。 在angular.json中：写“/src/assets/styles.css”（或“/src/assets/styles.scss”）。 - Vifier Lockla

Answer 5

我在处理我的React项目时遇到了同样的问题，我找到的解决方案是在webpack.config.js中的输出中添加一个"publicPath"。

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/",
},

- Lázaro V.C.

Answer 6

在生产环境中运行我的应用程序时，我遇到了相同的错误。使用npm run serve一切正常，但是使用npm run build的结果却导致了相同的错误。事实证明，我正在使用vue router的history模式，而我的nginx服务器没有正确配置。

我将vue router更改为hash模式，并停止收到该错误消息。尝试使用hash模式并查看消息是否消失。如果确实如此，则需要调整您的Web服务器设置。

- ferbarra

Answer 7

当您在 package.json 中设置错误的 BUILD 目录时，可能也会发生此问题。例如：

// Somewhere in index.js
// Client Build directory for the Server
app.use(express.static(path.resolve(__dirname, '../this-client/**build**')));

然后是 package.json：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "build-package-css": "cp src/assets/css/my-this-react.css **build**/my-this-react.css",
    "build-package": "npm run build-package-css && babel src --out-dir **build**"
  },

我标记为粗体的目录应该是相同的。如果有差异，则无法运行。

- Mapenzi

Answer 8

我遇到了这个问题... 我正在将一些scss文件集成到我的项目中，只是假定我应该使用 rel="stylesheet" <link href="/epic.scss" rel="stylesheet" type="text/css"> 一旦我删除了属性，就没有样式表问题了...

工作的.scss文件

 <link href="/epic.scss" type="text/css">   

- Lenn Dolling

Answer 9

尝试检查文件扩展名的大小写是否一致，可能会起作用！

对我来说，出现了相同的错误，原来是我将文件扩展名命名为.css，但是引用时写成了.CSS。

- Steve Hai

Answer 10

我真的尝试了所有的方法，但在我尝试将我的React项目部署到ic区块链时，仍然遇到了相同的错误。最后，我使用HTML的

- Rio