技術標籤：typescriptreact

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配置對應