As a React beginner, I am facing issues with getting my CSS to work properly in my project. I know that CSS is not used directly in React, but rather interpreted as JavaScript using webpack and babel.
What have I tried? I attempted to make changes to my webpack.config.js file, but I'm unsure of where the changes need to be made and what exactly needs to be changed. I looked into some threads on StackOverflow that suggested making adjustments to load CSS Modules in the project. However, it seems like my webpack.config.js already has CSS modules by default since I am using react-scripts v3.3 where CSS Modules are included by default.
My current react-scripts version is 3.3. I stick to the naming convention of ComponentName.css for my CSS files and importing them accordingly. I do not use the ComponentName.modules.css naming convention. I suspect that I might be missing some CSS/bootstrap link references in one of my project's main files. Any suggestions on where I should include these references, maybe in Index.js or somewhere else? Here's a snippet from my webpack.config.js file:
webpack.config.js file :
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
sideEffects: true,
},
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
}),
},