Right now I made another component that is on a new window called Blog.js. In-line styling is convenient but eventually it will get crowded and annoying to edit. I want to make another stylesheet using CSS module called Blog.module.css but when I style in it and import in Blog.js, it clashes with App.js component instead. Here's my code on stackoverflow: [https://stackoverflow.com/questions/69792331/how-do-i-make-a-new-css-file-for-a-new-component-in-react-js]

I'm having a problem when using CSS Modules with React + Webpack where my variable styles is undefined and nothing can be found. I'm using the following in my project:

"devDependencies": {
    "@babel/core": "^7.24.7",
    "@babel/preset-env": "^7.24.7",
    "@babel/preset-react": "^7.24.7",
    "babel-loader": "^9.1.3",
    "css-loader": "^7.1.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.6.0",
    "style-loader": "^4.0.0",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }

My webpack.config.js:

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',

    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },

    plugins: [
        new HTMLWebpackPlugin({
            template: './src/index.html'
        })
    ],

    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ]
                    }
                }
            },
            {
                test: /\.(png)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ['style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
}

I have a file called TestComponent.js which has:

import React from 'react';
import styles from './Test.module.css';

function TestComponent() {
    console.log(styles);

    return (
        <div className={styles.a}>
            <p>
                Random text Random text Random text Random text Random text Random text
            </p>
        </div>
    );
}

export default TestComponent;

My css file is called Test.module.css:

.a {
    border-style: solid;
    border-color: green;
    border-width: 2px;
}

Not sure what is going wrong? I've tried a few things so far...

Using: "import * as styles" seems to work but every guide I see online shows the way I did it above, so I'm confused as to why it wont work?

I found that using "import { a } from './Test.module.css';" works, but I still cannot get it to work if I try to do it the above way.

If I remain using styles but don't actually use it in a className it does get added into the index.html header as a style tag. I'm just unable to use it in the component.

I've also adjusted webpack.config.js a bit without any luck

{
    test: /\.css$/, // Apply CSS Modules only to .module.css files
    exclude: /\.module\.css$/,
    use: ['style-loader', 'css-loader']
    },
    {
    test: /\.module\.css$/, // Apply CSS Modules only to .module.css files
    use: [
        'style-loader', // Inject styles into the DOM
        {
        loader: 'css-loader', // Translates CSS into CommonJS
        options: {
            modules: {
            localIdentName: '[name]__[local]__[hash:base64:5]', // Custom naming pattern for CSS Modules
            },
        },
        },
    ],
    }

Github repo: https://github.com/randobanohando/testprj

i am facing issue when i am trying to scope css file to specific component in case of class component its working fine by following this article https://create-react-app.dev/docs/adding-a-css-modules-stylesheet

but in functional component this approach is not working

here is some my application details
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-scripts": "3.4.0"

here is my component
import React, { Component } from 'react';
import LS from './Layout.module.css';
// import './Layout.css'
import Aux from '../../hoc/Aux';

// const layout = (props) => (
//
// Toolbar Sidebar BackDrop
//
// {props.children}
//
//
// );

class layout extends Component {
render() {
return (

Toolbar Sidebar BackDrop

{this.children}

);
}
}
export default layout;

when i apply class approach the css is only scope to the layout file but i want to use finctional component but the scope css is not working when i use functional component

I just upgraded to Next 13 and switched to Typescript, so now I'm rewriting my web site. But VS Code cannot seem to find the module.css files. Files like global.css import just fine. Here's an example:

import './global.css';
import styles from './layout.module.css';

global.css can be found by VS Code, but layout.module.css cannot. However, when the code runs, both of these files import just fine. Any clue as to what I'm doing wrong?