资源解释为样式表，但使用 MIME 类型 text/x-scss 传输

Posted 2023-03-05

【中文标题】资源解释为样式表，但使用 MIME 类型 text/x-scss 传输

【英文标题】：Resource interpreted as Stylesheet but transferred with MIME type text/x-scss

【发布时间】：2020-09-21 08:55:16

【问题描述】：

我想用 nodejs 创建一个网站，但我在 scss 和 ejs 中的显示样式有问题。

我在文件夹 ../app/public/scss 中有一个 scss 样式，我使用这个中间件来设置静态文件与 express ：

    app.use(express.static(path.join(__dirname,'public')));
    app.set('view engine', 'ejs');
    app.set('views' , path.join(__dirname,'../','resources/views'));

在标题中我通过这种方式定义样式：

<link rel="stylesheet" type="text/css" href="/scss/vazir.scss">
<link rel="stylesheet" type="text/css" href="/scss/media-queries.scss">
<link rel="stylesheet" type="text/css" href="/scss/style.scss">

我通过这种方式在register.ejs :中使用标题

<%- include('./../header.ejs'); %>

注册

但是当我进入注册页面时，它会在控制台中显示这个：

资源被解释为样式表，但使用 MIME 类型 text/x-scss: "http://localhost:3000/scss/vazir.scss" 传输。

register:9 资源被解释为样式表，但使用 MIME 类型 text/x-scss: "http://localhost:3000/scss/media-queries.scss" 传输。

register:10 资源被解释为样式表，但使用 MIME 类型 text/x-scss: "http://localhost:3000/scss/style.scss" 传输。

有什么问题吗？我该如何解决这个问题？？？？

【参考方案1】：

浏览器不支持 SCSS。您需要将其编译为 CSS 并将 CSS 文件提供给浏览器。

有各种支持它的编译器。 SASS 是官方的。您可能希望找到与现有构建工具链集成的工具。

【讨论】：

我创建的 goggle chrome 不支持 scss 吗？我用 scss 和这个浏览器运行 angular 项目，它运行良好

谷歌浏览器是一个浏览器。它不支持 SCSS。您的 Angular 项目可能在其工具链中包含一个 SASS 编译器。