欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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';

react+typescript项目配置CSS模块化

3.3 使用样式

<div className={counterStyle.title}>
    counter
</div>

4.效果

编译后的类名与localIdentName配置对应

react+typescript项目配置CSS模块化
react+typescript项目配置CSS模块化

本文地址:https://blog.csdn.net/qq_42760405/article/details/111937793

相关标签: typescript react