I've been experimenting with React by converting a webpage I originally created using plain HTML and CSS. Currently, I'm dabbling with CSS modules, but it seems like some of the injected CSS within <style> tags is not quite right: image. Surprisingly, this issue does not impact all of the CSS classes.
To investigate further, I noticed that certain CSS styles were not being applied correctly. The current state of this component can be seen here: this, while it should actually appear like this.
The structure of my React components is as follows:
├── compA
├── index.tsx
└── styles.css
├── compB
├── index.tsx
└── style.css
I am importing the CSS files into the TSX files using: import "./style.css";. Can you spot what might be missing in my setup?
Here's a snippet from my webpack.config.js file:
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
module.exports = {
...
entry: {
main: "./src/index.tsx",
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"],
plugins: [
new TsconfigPathsPlugin({
configFile: path.resolve(__dirname, "./tsconfig.json"),
extensions: [".ts", ".tsx"]
})
],
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader"
},
{
test: /\.css$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: { modules: true }
}
]
}
],
}
};