Ant Design - Работает, если построен, но не с Webpack Dev Server - PullRequest
Новая
       19

Ant Design - Работает, если построен, но не с Webpack Dev Server

0 голосов
/ 24 марта 2019

У меня есть новый проект React, и я хотел бы использовать Компоненты Ant Design

Компоненты уже работают, но только если я создаю весь файл проекта. Так что с сборкой пряжи она работает, но созданный мной сервер разработки веб-пакетов не обслуживает CSS.

CSS не будет загружен. Ошибка в консоли:

Отказался от применения стиля из 'http://127.0.0.1:3999/~antd/dist/antd.css', поскольку его тип MIME (' text / html ') не является поддерживаемым типом MIME таблицы стилей, и включена строгая проверка MIME.

Уже взглянул на Таблица стилей не загружена из-за MIME-типа , но не смог найти правильное решение.

Вот так выглядит мой webpack.config.js: 

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,
  },
});

Может кто-нибудь помочь здесь?

Как я уже сказал, созданный файл сборки пряжи полностью работает, только сервер webpack-dev не работает.

...