0

Although the css and js files exist in the path, the following error is output. How to solve it?

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry : './src/index.js',
    output : {
        filename: "main.js",
        path: path.resolve(__dirname,"dist"),
    },
    module: {
        rules: [
          {
            test: /\.css$/,
             use: ["style-loader", "css-loader"],
            //use: [MiniCssExtractPlugin.loader, "css-loader"],
          },
          {
            test: /\.jpg$/,
            use: ["file-loader"],
          },
        ],
      },
    plugins : [new HtmlWebpackPlugin({
       template: './index.html',         
    }),
    new MiniCssExtractPlugin({
        filename: "common.css",
    }),
    ],
    devServer : {
        static : {
            directory : path.resolve(__dirname,'dist'
            )
        },
        port: 8080,
    },
};

Refused to apply style from 'http://localhost:8080/src/css/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. localhost/:10 GET http://localhost:8080/src/js/main.js net::ERR_ABORTED 404 (Not Found) index.js:551 [webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled. log.js:24 [HMR] Waiting for update signal from WDS...

enter image description here

enter image description here

enter image description here

mousetail
  • 7,009
  • 4
  • 25
  • 45
Jayden
  • 41
  • 4
  • 2
    please post your code as text in a code block instead of as images. – starball Sep 01 '22 at 09:34
  • it depends on your server side... those assets got served with the wrong mime type. Maybe you should add details on which platform you are using for your project and your configs. Maybe this https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type answers your question – Diego D Sep 01 '22 at 09:36
  • Do you automatically return an error page when a resource is not found? If so it's possible the file doesn't exist (or isn't at that location) and an error HTML page is being returned instead (Check the network response is actually the CSS file) – DBS Sep 01 '22 at 09:38
  • Edit your servers type files so it server the correct mimtype. Also check if the url is correct, you might be getting a 404 page which obviously will have the incorrect mime type. – mousetail Sep 01 '22 at 09:39
  • check relative path in dist folder i think you need remove src/js and src/css use instead src/js/main.js-->main.js and same for css – user16181 Sep 01 '22 at 09:43

0 Answers0