蚂蚁设计-如果已构建,但不能与Webpack Dev Server一起使用

时间:2019-03-24 14:20:14

标签: javascript webpack webpack-dev-server webpack-4

我有一个新的React项目,并想使用 Ant Design Components

这些组件已经可以工作,但是仅当我构建整个项目文件时才可以。因此,使用 yarn build 可以运行,但是我创建的webpack开发服务器不提供CSS。

将不会加载CSS。控制台错误:

拒绝应用“ http://127.0.0.1:3999/~antd/dist/antd.css”中的样式,因为它的MIME类型(“ text / html”)不是受支持的样式表MIME类型,并且启用了严格的MIME检查。

已经看过Stylesheet not loaded because of MIME-type,但找不到正确的解决方案。

这是我的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,
  },
});

有人可以在这里帮忙吗?

就像我说的那样,创建的yarn build文件完全可以工作,只是webpack-dev服务器不起作用。

0 个答案:

没有答案