2

I have a new React project and would like to use Ant Design Components

The components already work, but only if I build the whole project file. So with yarn build it works, but the webpack dev server I created does not serve the CSS.

The CSS won't be loaded. Error in console:

Refused to apply style from 'http://127.0.0.1:3999/~antd/dist/antd.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Already had a look at Stylesheet not loaded because of MIME-type but could not find the right solution.

This is how my webpack.config.js looks like:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env = {}) => ({
  entry: ['./src/main.scss', './src/main.jsx'],
  output: {
    path: path.resolve(__dirname, `./html/${env.branch || 'master'}`),
    filename: 'kt-infoscreen.js',
    library: 'ktInfoScreen',
    libraryExport: 'default',
    libraryTarget: 'umd',
  },
  mode: env.mode || 'development',
  devtool: 'eval',
  resolve: {
    extensions: ['.js', '.jsx', '.css', '.sass', '.scss'],
  },
  plugins: [
    new CopyWebpackPlugin([{
        from: 'dev/static/',
        to: 'static/'
      },
      'dev/index.html',
    ]),
  ],
  module: {
    rules: [{
        enforce: 'pre',
        test: [/\.js$/, /\.jsx$/],
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          failOnError: env === 'production',
        },
      },
      {
        test: [/\.js$/, /\.jsx$/],
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: [/\.css$/g, /\.sass$/g, /\.scss$/g],
        use: [{
            loader: 'css-hot-loader',
          },
          {
            loader: 'file-loader',
            options: {
              name: 'kt-infoscreen.css',
            },
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['./node_modules'],
              outputStyle: env === 'production' ? 'compressed' : 'nested',
            },
          },
        ],
      },
    ],
  },
  watchOptions: {
    poll: 1500,
  },
  devServer: {
    contentBase: path.resolve(__dirname, './dev/'),
    watchContentBase: true,
    disableHostCheck: true,
    host: '127.0.0.1',
    port: 3999,
    // public: process.env.webpack_public_address || null,
    overlay: true,
  },
});

Can someone help here ?

As I said, the created yarn build file completely works it's only the webpack-dev server that does not work.

Gutelaunetyp
  • 2,144
  • 4
  • 15
  • 40

0 Answers0