Question

我目前正在使用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

Answer 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'
});

希望这对您有所帮助。

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

1 个答案: