我有一个新的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服务器不起作用。