4

我正在使用 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

4

2 回答 2

4

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

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

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

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

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

于 2018-06-08T04:22:48.473 回答
1

谷歌搜索后我得到了解决方法。我是反应 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/

于 2018-12-18T15:43:15.963 回答