Issue
I am working on a React application that is running on the webpack-dev-server from npm. Upon running the server, I notice that I get the following message in the browser console:
"Refused to apply style from 'http://localhost:8080/css/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
I am able to fetch all of the following resources except the custom css file titled style.css. When I run application directly from the containing folder(without running on the local server), the style.css file loads without a problem.
Do I need utilize a css loader with webpack?
I already have reviewed the following post and have tried all the suggestions, but to no avail:
Stylesheet not loaded because of MIME-type
In index.html I use a link tag with the following format:
<link rel="stylesheet" type="text/css" href="css/style.css"
Here is my webpack.config.js file:
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
plugins: [
new HTMLWebpackPlugin({
template: './src/index.html', //source
filename: 'index.html' //destination
})
]
}
Here is my project directory structure:
src
components
css
- style.css
- index.html
- index.js
Any help would be appreciated
Solution
So it turns out that I needed to utilize the style-loader and css-loader. I suspect that the issue was entirely with webpack-dev-server and how it was referencing the stylesheet. I am utilizing webpack 4 in case it helps anyone in the future.
My webpack.config.js now looks like this:
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
//will automatically inject bundle js into ./dist/index.html
new HTMLWebpackPlugin({
template: './src/index.html', //source
filename: 'index.html' //destination
})
]
}
Answered By - Troy Leu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.