Webpack css issue, missing bundle.css

Question

I am using Webpack to add support for ES6, react and some other things.

Right now I am getting error:

Refused to apply style from http://localhost:5500/bundle.css because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

So I checked sources tab in Google Chrome Developer Tools and the bundle.css doesn't even exist. What i am doing wrong ?

Here's my webpack config:

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "/"),
    publicPath: "/",
    filename: "bundle.js"
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js\jsx)$/,
        exclude: /(node_modules|framework)/,
        loader: require.resolve("babel-loader"),
        options: { presets: ["@babel/preset-env"] }
      },
      {
        test: /\.css$/,
        use: [require.resolve("style-loader"), require.resolve("css-loader")]
      },
      {
        test: /\.scss$/,
        use: [
          require.resolve("style-loader"),
          require.resolve("css-loader"),
          require.resolve("sass-loader")
        ]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  devServer: {
    port: 5500,
    host: "<ip address>",
    publicPath: "http://localhost:5500",
    hotOnly: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html"),
      filename: "index.html",
      inject: true
    })
  ]
};

You're not extracting the css webpack.js.org/plugins/mini-css-extract-plugin — Dominic
replaced require.resolve("style-loader") with: MiniCssExtractPlugin.loader, and added to plugins: new MiniCssExtractPlugin({ filename: "[name].css" }) Still get the same error — Steponas Ivashovas
Nevermind, solved it, for some reason plugin generated main.css but searched for bundle.css had to add {filename: bundle.css} to plugin constructor, regardless mini-css-extract-plugin was the solution, thanks ! — Steponas Ivashovas

Dominic Dominic · Accepted Answer · 2018-09-24T13:01:43

By default css is compiled into the js bundle during dev, to extract it out to a file for your prod build in webpack 4 use https://webpack.js.org/plugins/mini-css-extract-plugin/.

Older versions of webpack should use https://github.com/webpack-contrib/extract-text-webpack-plugin

Webpack css issue, missing bundle.css

1 Answers