The style was declined from being applied due to its MIME type, which was identified as 'text/html'

Question

The style was declined from being applied due to its MIME type, which was identified as 'text/html'

Currently, I am working on VueJS with Webpack and SCSS. I am facing a problem when attempting to import the SCSS file into the component using the following code:

<style type="scss"> @import "/sass/pages/_initial.scss";</style>

Upon doing so, an error message pops up saying:

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.

Even though the file is being found, the issue persists. The SCSS code is pretty straightforward:

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

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

It's confusing why this error is occurring since the MIME type should be text/css

css vue.js sass vuejs2

Answer 1

Answer №1

While working with WebPack and MiniCssExtractPlugin, I came across an issue caused by a missing '.' in the file path.

The incorrect code looked like this:

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

It should have been written like this:

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

// The correct way to write it is:

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

I hope this tip proves helpful to you.

Answer 2

While working with WebPack and MiniCssExtractPlugin, I came across an issue caused by a missing '.' in the file path.

The incorrect code looked like this:

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

It should have been written like this:

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

// The correct way to write it is:

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

I hope this tip proves helpful to you.

The style was declined from being applied due to its MIME type, which was identified as 'text/html'

Answer №1

Similar questions

Using the ternary expression in v-model to access the value of an object

index.html: using jquery for selecting colors

Arranging HTML Lists in Perfect Order

Expand the accordion to reveal all the content

unique close button design for pop-up video player on YouTube

The main div element is experiencing an overflow due to the excessive

Vue Method always executed (regardless of click event)

Disappear solely upon clicking on the menu

The Axios interceptor is failing to retrieve the user's current authentication token from the Vuex store

Unusual CSS rendering hiccup

Is there a way to confirm if I am taking a direct route instead of a detour?

Tips for altering the entire page layout in Vuetify

Aligning angular bootstrap modal window in the center vertically

Unresponsive JavaScript on specific element IDs

What is the best way to implement this design using CSS or JavaScript?

Troubleshooting issue: Bootstrap 4 Card trimming absolute content within div

Having trouble with Vue router functionality

Unable to display menu content text using jQuery

Left align the CSS menu text next to the menu image

What are the best methods for aligning pseudo elements vertically?