拒绝应用样式，因为它的 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"，而不是设置类型。

标签： css vue.js sass vuejs2

【解决方案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'
});

希望对您有所帮助。

【讨论】：