react+typescript项目配置CSS模块化
程序员文章站
2022-06-19 15:35:22
1.配置loadermodule: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader' }, { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader',...
1.配置loader
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader'
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
}
]
}
]
},
2.编写typescript声明文件
2.1 在根目录新建typings文件夹,新建style.d.ts
// css模块声明
declare module '*.module.css' {
const content: any;
export = content;
}
2.2 配置tsconfig.json
{
"compilerOptions": {
...
},
/* 编译范围 */
"include": [
"./src/**/*",
"./typings/**/*"
]
}
3.引用
3.1 新建counter.module.css
.title {
height: 45px;
color: red;
}
3.2 模块导入,使用import导入需要配置typescript文件声明,否则会报’找不到模块’
import counterStyle from './style/counter.module.css';
3.3 使用样式
<div className={counterStyle.title}>
counter
</div>
4.效果
编译后的类名与localIdentName配置对应
本文地址:https://blog.csdn.net/qq_42760405/article/details/111937793
上一篇: 【JS之路】“简单”的数据类型