react+typescript项目配置CSS模块化

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