Question

我正在使用ReactJS和typescript创建概念验证项目的初始设置，并且我希望在其中包含CSS模块而无需弹出webpack配置。

以下是我目前采取的步骤：

npm install -g create-react-app
create-react-app firstapp --scripts-version = react-scripts-ts
npm install react-app-rewired --save-dev
npm install --save-dev codebandits / react-app-rewire-css-modules sass-loader node-sass
的package.json：＆＃34;开始＆＃34;：＆＃34; react-app-rewired start --scripts-version react-scripts-ts＆＃34;
配置-overrides.js：

const rewireCssModules = require（＆＃39; react-app-rewire-css-modules＆＃39;）; module.exports = function override（config，env）{ config = rewireCssModules（config，env）;
return config; }

我正确设置了我的App.module.scss文件，并在我的App.tsx文件中引用它：

从＆＃39; ./ App.module.scss＆＃39;;

导入样式

当我运行项目时，我对css模块有错误：找不到模块＆＃39; ./ App.module.scss＆＃39;。

当我在没有打字稿配置的情况下执行完全相同的项目时，它可以正常工作。

我应该更改哪些CSS模块需要考虑？

我遇到了typings-for-css-modules-loader，但由于我没有弹出webpack配置，所以我不确定如何将它集成到我的配置中。

提前致谢，

Thomas .T

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

声明模块＆＃39; *。css＆＃39;
声明模块＆＃39; * .scss＆＃39;

它成功了。我最终没有使用typings-for-css-modules-loader。

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

Answer 1

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

声明模块'* .css'
声明模块'* .scss'

它成功了。我最后没有使用typings-for-css-modules-loader。

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

在2天内接受这个答案。

Answer 2

经过大量搜索后，我得到了解决方法。我是新来反应js并尝试使用Typescript进行构建的人，因此我找到了解决方案并开始使用

react-script-ts

软件包。但是，当我开始使用CSS模块时，遇到了从'./button.css'导入类的问题，所以我使用了 import'./button.css'，但是在这种大量的css冲突中，较高组件范围的css总是被较低组件覆盖。所以用了很多搜索，终于找到了解决方案。

解决方案 从2.1支持打字稿的create-react-app开始，将您的应用程序转换为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/

在ReactJS + Typescript中加载CSS模块并响应重新连接

2 个答案: