拒绝应用样式，因为它的 MIME 类型（'text/html'）

Posted 2023-02-22

【中文标题】拒绝应用样式，因为它的 MIME 类型（\'text/html\'）

【英文标题】：Refused to apply style because its MIME type ('text/html')拒绝应用样式，因为它的 MIME 类型（'text/html'）

【发布时间】：2018-11-25 23:53:05

【问题描述】：

我目前正在使用 Webpack 和 SCSS 开发 VueJS。我遇到的问题是，每当我尝试将 SCSS 文件导入组件时： <style type="scss"> @import "/sass/pages/_initial.scss";</style>

我收到一条错误消息：Refused to apply style from 'http://localhost:8080/sass/pages/_initial.scss' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

因此，查找文件不是问题，它会找到它。 那里的代码非常简单明了，只是一些 SCSS：

#initial 
position: relative;
background-color: $primary-white;


.vid-play-one 
    width: 100%;
    height: 90%;
    overflow: hidden;

我很疑惑为什么会这样，mime类型应该是text/css

【问题讨论】：

你需要导入渲染好的css文件，而不是scss文件。

尝试使用lang="scss" 属性而不是type

旁注：当您在浏览器地址栏中输入http://localhost:8080/sass/pages/_initial.scss 时会得到什么？

我没有收到找不到文件的错误，它只是加载索引页面的内容。但是，Gavin 提供的解决方案确实有效，我尝试了 lang="scss"，而不是设置类型。

【参考方案1】：

我在 WebPack 中使用 MiniCssExtractPlugin，我意识到缺少 '.' 会导致以下问题。

来自

filename: '/style.[contenthash].css'

到

filename: './style.[contenthash].css'

//correct way should be like this

new MiniCssExtractPlugin(
  publicPath: './sass/',
  filename: './style.[contenthash].css'
);

希望对您有所帮助。