Out of the box error on first DEV run

[netaisllc]

On a fresh clone, the first npm run dev results in an error loading the app style sheet. The console error is something like this:

Refused to apply style from '{bundles.css blah blah}' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

To work-around it, I built the project (which produces a physical bundles.css file) once, and resumed devving. That seemed to clear the error.

Leaving this open as it could be that I'm missing something fundamental. If not, good to close it.

[frederikhors]

Same here. Strange enough the style works. It seems webpack-dev-server doesn't serve bundle.css on http://localhost:8080/bundle.css.

[rhernandog]

Same here I want to learn how to use Svelte and before I can write a single line of code I ran into this error.

EDIT

Changing the webpack file to this prevents the issue:

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  },

Of course this is not ideal because of HMR, but prevents the error.

[KieranP]

mini css extract plugin seems to support HMR now. This is my config which works great:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';

module.exports = {
  entry: {
    bundle: ['./src/main.js']
  },
  resolve: {
    alias: {
      svelte: path.resolve('node_modules', 'svelte')
    },
    extensions: ['.mjs', '.js', '.svelte'],
    mainFields: ['svelte', 'browser', 'module', 'main']
  },
  output: {
    path: __dirname + '/public',
    filename: '[name].js',
    chunkFilename: '[name].[id].js'
  },
  module: {
    rules: [
      {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: true,
            hotReload: true
          }
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { hmr: !prod }
          },
          'css-loader'
        ]
      }
    ]
  },
  mode,
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[name].[id].css'
    })
  ],
  devtool: prod ? false: 'source-map'
};