css - 在 ReactJS + Typescript 中加载 CSS 模块并重新连接反应
问题描述
我正在使用 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"
配置覆盖.js:
const rewireCssModules = require('react-app-rewire-css-modules'); module.exports = function override(config, env){ config = rewireCssModules(config, env);
返回配置;}
我正确设置了我的 App.module.scss 文件,并在我的 App.tsx 文件中引用了它:
从 './App.module.scss' 导入样式;
当我运行项目时,我有一个关于 css 模块的错误:找不到模块'./App.module.scss'。
当我在没有打字稿配置的情况下执行完全相同的项目时,它可以工作。
为了考虑 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
解决方案
我添加了一个 global.d.ts 文件:
- 声明模块'*.css'
- 声明模块'*.scss'
它成功了。最后我没有使用 typings-for-css-modules-loader 。
答案来自这篇文章:https ://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
将在 2 天内接受此作为答案。
推荐阅读
- xml - Ant 项目没有“默认”属性,有可能吗?
- html - Css从div中隐藏红线(是一个跨度)?
- excel - 为什么带有 cell.value 的宏停止工作并返回错误 2015?
- sql - 如何在Angular 2的数据库中存储用户信息?
- azure - 在 Azure 批处理池中使用支持 GPU 容器的 VM 时,节点进入不可用状态
- sql - 即使存在 NULL 值,SQL Count NULL 值也为 0
- xml - 如何修复 xml laravel 5.7 中的 foreach 错误
- angular - *ngFor 在我添加引导程序之前工作,现在一切都坏了
- java - RabbitMQ - 信任存储允许所有连接通过
- kotlin - Spring AMQP 和 Kotlin - 将所有声明聚合到集合中