CSS/SCSS attached file names not showing in browser in React Webpack project

Question

In the google chrome browser Inspect element on any element CSS is showing as ..., but CSS/SCSS file names not showing in the browser inspect element.

I am working on a React micro-frontend project; therefore, I am using Webpack instead of npx create-react-app.

Now HTML page output is:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
<style>
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
...css
</style>
<style></style>
</head>

<body>
    <div id="root">...html</div>
</body>
</html>

Inspect Element screenshot is here:

Inspect Element screenshot

Expectation: CSS/SCSS attached file names should show in the browser Inspect element as Marked

expected CSS/SCSS file names as MARKED

Webpack configuration file is:

module.exports = {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, "../", 'build'),
        filename: 'bundle.js',
    },
    devServer: {
        port: 8000,
        hot: true,
        historyApiFallback: true,
    },
    module: {
        rules: [
            {
                test: /\.(?:js|ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env'],
                        plugins: ["@babel/plugin-transform-runtime"]
                    }
                }
            },
            {
                test: /\.(?:css|scss)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                    "postcss-loader"
                ],
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
    ],
}

Noventiq · Accepted Answer · 2024-08-13 13:34:27Z

0

Just find the exact solution from the Webpack website.

Updated mentioned code in webpack.config.js

{
                test: /\.(?:css|scss)$/,
                include: path.resolve(__dirname, 'src'),
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader", options: { sourceMap: true } },
                    { loader: "postcss-loader", options: { sourceMap: true } },
                    { loader: "sass-loader", options: { sourceMap: true } },
                ],
            },

answered Aug 13, 2024 at 13:34

Noventiq

213 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS/SCSS attached file names not showing in browser in React Webpack project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related