提问者:小点点

在react JS Typescript中加载CSS模块并重新布线react


我正在使用ReactJS和typescript创建一个概念验证项目的初始设置,我希望在其中包含CSS模块,而不必弹出网页包配置。

以下是我迄今为止遵循的步骤:

>

  • npm安装-g创建-反应-app
  • 创建-反应-应用程序firstapp-脚本-版本=反应-脚本-ts
  • npm安装react-app-重新连线-保存-dev
  • npm安装-保存-开发代码块/react-app-rewire-css-模块sass加载节点sass
  • package.json:"start":"react-app-rewire start--crips-version react-crips-ts"
  • config-overrides.js:

    const-rewireCssModules=require('react-app-rewire-css-modules');单元exports=函数重写(config,env){config=rewireCssModules(config,env);
    返回配置;}

    我正确设置了我的应用程序。单元scss文件,并在我的应用程序中引用了它。tsx文件:

    从'导入样式。/App.module.scss';

    当我运行这个项目时,我有一个关于css模块的错误:找不到模块'/应用程序。单元scss’。

    当我在没有typescript配置的情况下执行完全相同的项目时,它仍然可以工作。

    要考虑CSS模块,我应该做哪些更改?

    我是为css模块加载器进行打字的,但我不确定如何将其集成到我的配置中,因为我没有弹出网页包配置。

    提前感谢,,

    托马斯。T

    编辑1:我添加了一个global.d.ts文件:

    >

    声明模块“*”。scss'

    它成功了。最后,我没有为css模块加载程序使用打字。

    答案来自本文:https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a


  • 共2个答案

    匿名用户

    我添加了一个global.d.ts文件:

    • 声明模块“*”。css'
    • 声明模块“*”。scss'

    它成功了。最后,我没有为css模块加载程序使用打字。

    答案来自本文:https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a

    我会在2天内接受这个答案。

    匿名用户

    在谷歌搜索了很多次之后,我找到了解决办法。我不熟悉react js,并尝试使用typescript进行构建,因此我找到了解决方案并开始使用

    脚本

    包裹但当我开始使用css模块时,遇到了“从导入类”的问题/按钮css“不起作用,所以我使用导入”/按钮但是在这种情况下有很多css冲突,较高的组件范围css总是被较低的组件覆盖。所以谷歌搜索了很多,终于找到了解决方案。

    来自2.1 create react应用程序的解决方案支持typescript,因此将您的应用程序转换为上面的2.1

    1.create new application using `npx create-react-app my-new-app --typescript`
    2. replace your old src folder in new solution
    3. Rename all your css file with `*.module.css` and change the import based on that.
    4. Add your package dependancy if anything missing
    5. Run
    

    来源:https://joshblog.net/2018/upgrading-a-react-and-typescript-app-from-react-scripts-ts-to-create-react-app-v2-1/