首页 文章

在ReactJS Typescript中加载CSS模块并进行重新连接

提问于
浏览 次
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"

  • config-overrides.js：

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

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

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

当我运行项目时，我有一个关于css模块的错误：无法找到模块'./App.module.scss' .

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

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

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

提前致谢，

托马斯.T

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

  • 声明模块'* .css'

  • 声明模块'* .scss'

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

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

css reactjs typescript webpack react-css-modules

2 回答

  • 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天内接受这个作为答案 .

    回复于
  • 0

    谷歌搜索后我得到了解决方法 . 我是新手反应js并尝试使用打字稿构建，所以我找到了解决方案并开始使用

    react-script-ts

    包 . 但是当我开始使用css模块时遇到问题 import class from './button.css' 没有工作所以我使用 import './button.css' 但是在这里有很多css冲突，更高的组件范围css总是被更低的组件覆盖 . google了很多，最后得到了解决方案 .

    Solution 来自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/

    回复于

相关问题