css 文件缺少样式标记

如何解决css 文件缺少样式标记

我一定遗漏了一个基本概念，但我对 webpack 缺乏经验，所以如果有人可以借给我，我需要帮助。

在更改我的代码以使用“代码拆分”之前，我有这个 webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        './client/index': './client/index.js',},output: {
        filename: '[name].js',// output bundle file name
        path: path.resolve(__dirname,'./static'),// path to our Django static directory
    },devtool: "source-map",// we need this so that browsers can grab a source map.  
    // A source map just helps with reading minified code.
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,exclude: /node_modules/,loader: "babel-loader",options: {
                    presets: ["@babel/preset-env","@babel/preset-react"],plugins: ["@babel/plugin-proposal-class-properties","@babel/plugin-transform-runtime"]
                },{
                test: /\.css$/,use: ['style-loader','css-loader']
            },{
                test: /\.(png|jp(e*)g|svg|gif)$/,use: [
                    {
                        loader: 'file-loader',options: {
                            name: 'images/[hash]-[name].[ext]',],]
    },resolve: {
        alias: {
            jquery: (function () {
                // this is the workaround so we don't get a failed build because it wants jquery
                // necessary with the introduction of react-bootstrap-slider
                // https://github.com/brownieboy/react-bootstrap-slider#readme
                const jQueryAlias = path.join(
                    __dirname,"./static/js/stubs/jquery-stub.js"
                );
                return jQueryAlias;
            })()
        }
    }
};

入口文件 index.js 有两个像这样的 css 导入 -

import 'bootstrap/dist/css/bootstrap.min.css';

import '../static/css/styles.css';

当我在开发模式下构建包并在浏览器中查看位于 localhost 的网站时，我可以分别看到每个 css 导入的两个样式标签。

我现在有这个配置来支持“代码拆分”，但我缺少 style.css 的样式标签。

const path = require('path');

module.exports = {
    entry: {
        './client/index': './client/index.js',// devtool: "source-map",// we need this so that browsers can grab a source map.  
    // // A source map just helps with reading minified code.
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,"@babel/preset-react","@babel/plugin-transform-runtime","@babel/plugin-syntax-dynamic-import"]
                },use: [
                    'style-loader','css-loader'
                ]
            },"./static/js/stubs/jquery-stub.js"
                );
                return jQueryAlias;
            })()
        }
    }
};

并且在入口文件的顶部再次导入了两个样式表。我做错了什么？

如果您需要更多信息，请告诉我。提前致谢。

编辑

配置的唯一区别是这个插件 - "@babel/plugin-syntax-dynamic-import"。

显然我的代码发生了变化，所以我使用了动态导入，但导入的 css 文件位于入口文件的顶部，因此无论其他文件尚未加载，都应该在那里。

*** 解决方法 ***

import { createGlobalStyle } from 'styled-components';

如果知道如何以另一种方式做到这一点还是很高兴的。