[Solved] Style tag is missing for css file

user1849962 Asks: Style tag is missing for css file
I must be missing a fundamental concept but I’m too inexperienced with webpack so I need a hand if anybody could lend one.

Prior to changing my code so that it uses “code spliting” I had this webpack.config.js

Code:
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;
            })()
        }
    }
};

The entry file, index.js, had at the top two css imports like this –

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

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

When I built the bundle in dev mode and looked at the website at localhost in the browser I could see two style tags for each css import respectively.

I now have this config to support “code spliting” and am missing the style tag for the styles.css.

Code:
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", "@babel/plugin-syntax-dynamic-import"]
                },
            },
            {
                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;
            })()
        }
    }
};

And the two stylesheets are imported at the top of the entry file again. What am I doing wrong?

Let me know if you need further information. Thanks in advance.

EDIT

The only difference in the configs is this plugin – “@babel/plugin-syntax-dynamic-import”.

Obviously my code has changed so I use dynamic imports but the css files imported are at the top of the entry file so should be there regardless of whatever else hasn’t loaded.

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.