create-react-app创建的项目使用css-module问题整理

create-react-app 项目使用css-module及问题整理

使用 create-react-app 创建的 React TypeScript 项目,如何以 Module 的形式引入 css 呢?

正常情况可以这样引入:

import './index.scss';

但是像下面这样:

import styles from './index.scss';

就会报错:

TS2307: Cannot find module './index.scss' or its corresponding type declarations.

意思差不多是找不到该模块。

理论上 React 默认是支持 sass / scss 的啊,也没错,因为第一种方式是可行的,只不过不支持以模块的形式引入。

解决方法有三种:

  1. 使用 require 引入:

    const styles = require('./index.scss')
  2. 添加全局声明

    create-react-app 创建的 React 项目在 /src 目录有一个 react-app-env.d.ts 文件,添加如下代码:

    declare module '*.module.css' {
      const classes: { readonly [key: string]: string }
      export default classes
    }
    
    declare module '*.module.sass' {
      const classes: { readonly [key: string]: string }
      export default classes
    }
    
    declare module '*.module.scss' {
      const classes: { readonly [key: string]: string }
      export default classes
    }

    这样就支持 *.css*.sass*.scss 格式文件以模块形式引入了。

    import styles from './index.module.scss';

    注意这里需要带 .module ,不然会不生效。

  3. 为了提高代码的可读性,可以把处理 css 的部分单独拆出来。

    在根目录新建一个 type-scss.d.ts 文件,将上面的代码复制进去,然后在 tsconfig.jsoninclude

    /// `tsconfig.json`
    {
      // ...
      "include": [
        "src",
        "type-scss.d.ts" // 配置的 css.d.ts文件
      ]
    }
  4. 使用 TypeScript 无非就是因为它的代码约束和提示能力,所以比较推荐的一个方法,是为 index.scss 生成 index.scss.d.ts 。

    借助插件 typed-css-modules ,通过命令行生成 d.ts ,支持 watch 模式。

    安装插件:

    npm install -g typed-css-modules

    执行命令:

    tcm src

    会生成 .d.ts 文件:

    - src/
        | myStyle.css
        | myStyle.css.d.ts [created]

    它还支持一些参数:

    -o 或者 --outDir 指定文件夹

    tcm -o dist src
    (your project root)
    - src/
        | myStyle.css
    - dist/
        | myStyle.css.d.ts [created]

    -w 或者 --watch ,监视项目输入目录中的文件,修改后会自动编译。

    -c 或者 --camelCase ,自动将 some-component 转换成驼峰发形式 SomeComponent

    .SomeComponent {
      height: 10px;
    }

    一般使用以下命令就可以:

    tcm src -w -c



未经允许不得转载:前端资源网 - w3h5 » create-react-app创建的项目使用css-module问题整理

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)