I am trying to utilize .scss classes by importing them and applying them to the className property of a React component.
Here is the structure of my project :
root/
...
config/
...
webpack.config.js
src/
...
global.d.ts
app/
...
components/
layout/
...
Box/
Box.scss
Box.tsx
The contents of the .d.ts file are as follows :
declare module '*.scss' {
const content: { [className: string]: string }
export = content
}
For the webpack configuration in webpack.config.js, I have included the following rules:
...
module: {
rules: [
// assets (.css, .scss)
{
test: /\.s?css$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
// typescript
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: path.resolve(rootPath, 'node_modules'),
},
],
},
...
Inside Box.scss, I have defined the styling for the .Box class. Here is the code snippet:
.Box {
padding: 16px;
border-radius: 4px;
text-align: center;
color: #ede9f9;
font-weight: 700;
background-color: #47b0b0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}
In the Box.tsx file, I import the styles from Box.scss and attempt to apply them to the Box component. However, when I try to access styles.Box, it returns undefined. What could be causing this issue?