【问题标题】:Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled拒绝应用来自 '' 的样式,因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型,并且启用了严格的 MIME 检查
【发布时间】:2018-08-30 13:21:39
【问题描述】:

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

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


我搜索了SO,找到了Angular related post,但这对我没有帮助,它们基于不同的前端框架。

【问题讨论】:

  • 我也有同样的问题 - 你解决了吗?
  • here。这个答案对我有帮助。

标签: vue.js


【解决方案1】:

我的 React 项目也遇到了同样的问题,我找到的解决方案是在 webpack.config.js 的输出中添加一个“publicPath”。

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

【讨论】:

    【解决方案2】:

    当您在 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**"
      },
    

    我标记为粗体的目录应该是相同的。如果有差异,则不会运行。

    【讨论】:

      【解决方案3】:

      我遇到了完全相同的问题“拒绝应用来自 'http://localhost:8080/css/formatting.css' 的样式,因为它的 MIME 类型 ('application/json') 不是受支持的样式表 MIME 类型...”

      我浏览了窗口资源管理器并按照我的意图更正了文件路径(文件夹)。寻址中也存在拼写错误,如上面的路径(formatting.css 或双 't'),但文件实际上是 formating.css(单 't')并且问题已解决。有些解决方案根本不贵。谢谢。

      【讨论】:

        【解决方案4】:

        您必须将文件 css 的位置更改为目录 assets 资产/style.css

        然后把这些路径放到你的文件 index.html src/index.html

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

        此外,您还必须修改文件 angular.json 的样式

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

        【讨论】:

        • 这个方法也可以正常运行。如果您在 HTML 文件中使用声明:编写“/assets/styles.css”(或“/assets/styles.scss”)。在 angular.json 中:写“/src/assets/styles.css”(或“/src/assets/styles.scss”)。
        【解决方案5】:

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

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

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

        确切的路径和路由器配置取决于您设置项目的方式和您使用的框架。

        【讨论】:

          【解决方案6】:

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

          假设您在组件的样式块中 @import css 文件。所以我的问题出在我指定的路径中。由于路径错误,出现错误消息Refused to apply style。我以为我的 src 路径别名 ~ 已在样式块中解析,但事实并非如此。

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

          【讨论】:

            猜你喜欢
            • 2018-11-21
            • 2018-08-01
            • 2018-07-31
            • 2020-07-09
            • 2020-01-02
            • 2018-08-24
            • 2021-07-09
            • 2021-06-20
            • 2021-06-05
            相关资源
            最近更新 更多