css - 在 ReactJS + Typescript 中加载 CSS 模块并重新连接

标签 css reactjs typescript webpack react-css-modules

我正在使用 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 = function override(config, env){ 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

最佳答案

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

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

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

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

将在 2 天内接受此作为答案。

关于css - 在 ReactJS + Typescript 中加载 CSS 模块并重新连接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50747062/

相关文章:

html - 将页脚放在页面底部(如果需要滚动)

reactjs - 对 useEffect 的多次调用 - React

javascript - 在 Typescript 中,如何使用字符串类型联合来约束来自另一个类型或接口(interface)的键

javascript - 为什么 typescript 没有 "function"类型?

javascript - 如何在媒体查询语法里面使用ng-deep?

css 在 div 之外显示图像 20 px

javascript - 将 mouseleave 函数添加到 div 中的多个 Accordion ?

html - 自适应 svg 背景

javascript - 为什么我的按钮没有在 React 中渲染?

javascript - 如何使用 webpack 将 firebase 云消息传递包含到 ReactJS 项目中