css module file is undefined #18401
Answered
by
alexander-akait
sunday-sunny
asked this question in
Q&A
-
I set module.css, but the style is undefined. I don't know why does't work. I need a some advice. To apply module.css, I wrote the following example code. import s from './TestComponent.module.css';
function TestComponent() {
console.log({ s }); // just log
return <span className={s.text}>Test Component</span>;
}
export default TestComponent; .text {
color: tomato;
} and declare
finally, my webpack setting file. import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const __dirname = path.resolve();
const config = {
mode: 'development',
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/i,
exclude: /node_modules/,
use: {
loader: 'ts-loader',
},
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
devtool: 'inline-source-map',
devServer: {
static: './dist',
hot: true,
open: true,
},
};
export default config; It is a {
"compilerOptions": {
"target": "es2021",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "CommonJS",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"noEmit": false,
"baseUrl": "./src",
"paths": {
"@components/*": ["components/*"]
},
"outDir": "./dist",
"typeRoots": ["./node_modules/@types", "./src/types"]
},
"include": ["src"],
"exclude": ["node_modules"]
} However, when executed(
|
Beta Was this translation helpful? Give feedback.
Answered by
alexander-akait
May 22, 2024
Replies: 1 comment 1 reply
-
Please use |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
sunday-sunny
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Please use
import * as s from './TestComponent.module.css';