javascript - Webpack error: CSS has not the correct Mimetype

Question

I've tried everything possible and I'm struggling with webpack. I need a configuration, that generates html files from pugfiles, and css from scss. My problem is that at first the CSS had not the right Mime type. By fixing the link in the layout.pug the Mimetype error is gone, but webpack crashes and says that it can't find the css file. By setting adding attributes to the html-loader loader: 'html-loader', options: {attributes: false}} the errormsg ist gone, but I still cant load my cssfile in the browser.

I've tried adding historyApiFallback: true, publicPath: "/dist/" in webpack.config.js and base(href="/") in layout.pug but nothing helps.

Do you have any idea what could help?

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

const pug = {
  test: /.pug$/,
  use: [{loader: 'html-loader', options: {attributes: false}}, 'pug-html-loader']
};
const css = {
    test: /.css$/,
    use: ['style-loader',
    {loader: 'css-loader', options: {importLoaders: 1}}
    ,'postcss-loader']
  };

const sass = {
    test: /.scss$/,
    exclude: /node_modules/,
    use: [
        {
            loader: 'file-loader',
            options: { outputPath: 'css/', name: '[name].min.css'}
        },
        'sass-loader'
    ]
}
const config = {
  entry: [
      './src/index.js',
      './src/scss/styles.scss'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [pug,sass,css]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.pug',
      inject: false
    })
 ],
 devServer: {
    watchContentBase: true,
    contentBase: path.resolve(__dirname, 'dist'),
    historyApiFallback: true,
    publicPath: "/dist/"
    }
};
module.exports = config;

Thank you very much!

question from:https://stackoverflow.com/questions/66056227/webpack-error-css-has-not-the-correct-mimetype

Answer 1

Waitting for answers