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

Posted

技术标签:

【中文标题】在 ReactJS + Typescript 中加载 CSS 模块并重新连接反应【英文标题】:Load CSS module in ReactJS + Typescript and react rewired 【发布时间】:2018-11-17 17:07:04 【问题描述】:

我正在使用 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: "start": "react-app-rewired start --scripts-version react-scripts-ts"

config-overrides.js:

const rewireCssModules = require('react-app-rewire-css-modules'); module.exports = 功能覆盖(配置,环境) config = rewireCssModules(config, env); 返回配置;

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

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

当我运行项目时,我遇到了关于 css 模块的错误: 找不到模块“./App.module.scss”。

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

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

我遇到了 typings-for-css-modules-loader,但我不确定如何将它集成到我的配置中,因为我没有弹出 webpack 配置。

提前致谢,

托马斯.T

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

声明模块'*.css'

声明模块'*.scss'

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

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

【问题讨论】:

【参考方案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 天内接受此作为答案。

【讨论】:

【参考方案2】:

我在谷歌上搜索了很多之后得到了解决方法。我是反应 js 的新手并尝试使用 typescript 构建,所以我找到了解决方案并开始使用

反应脚本-ts

包。但是当我开始使用 css 模块时遇到问题 import class from './button.css' 不起作用,所以我使用了 import './button.css' 但是在这有很多 css 冲突,较高的组件范围 css 总是被较低的组件覆盖。所以google了很多,终于找到了解决方案。

解决方案 从 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 模块并重新连接反应的主要内容,如果未能解决你的问题,请参考以下文章

typescript+reactjs+requirejs:如何将 react-dom 导入 typescript

TypeError:fs.​​existsSync 不是函数(Electron/ReactJS/Typescript)

缺少元素的“关键”道具。 (ReactJS 和 TypeScript)

ReactJS 和 Typescript :引用一个值,但在此处用作类型 (TS2749)

当 ReactJS 遇到 TypeScript

我如何在 reactjs + typescript (钩子)中使用 useRef 将子状态值传递给父级