在 ReactJS + Typescript 中加载 CSS 模块并重新连接
Load CSS module in ReactJS + Typescript and react rewired
我正在使用 ReactJS 和打字稿创建概念验证项目的初始设置,我想在其中包含 CSS 模块,而不必弹出 webpack 配置。
以下是我到目前为止遵循的步骤:
- npm install -g create-react-app
- create-react-app firstapp --scripts-version=react-scripts-ts
- npm 安装 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"
配置-overrides.js:
const rewireCssModules = require('react-app-rewire-css-modules');
module.exports = 函数覆盖(配置,环境){
config = rewireCssModules(config, env);
return 配置; }
我正确设置了我的 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 天内接受此作为答案。
经过大量谷歌搜索,我得到了解决方法。我是 React js 的新手,并尝试使用打字稿进行构建,所以我找到了解决方案并开始使用
react-script-ts
包。但是当我开始使用 css 模块时遇到问题 import class from './button.css' 不起作用所以我使用 import './button.css' 但是在这里面有很多 css 冲突,较高的组件范围 css 总是被较低的组件覆盖。所以谷歌了很多,终于找到了解决方案。
解决方案
从支持 typescript 的 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
我正在使用 ReactJS 和打字稿创建概念验证项目的初始设置,我想在其中包含 CSS 模块,而不必弹出 webpack 配置。
以下是我到目前为止遵循的步骤:
- npm install -g create-react-app
- create-react-app firstapp --scripts-version=react-scripts-ts
- npm 安装 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"
配置-overrides.js:
const rewireCssModules = require('react-app-rewire-css-modules'); module.exports = 函数覆盖(配置,环境){ config = rewireCssModules(config, env);
return 配置; }
我正确设置了我的 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 天内接受此作为答案。
经过大量谷歌搜索,我得到了解决方法。我是 React js 的新手,并尝试使用打字稿进行构建,所以我找到了解决方案并开始使用
react-script-ts
包。但是当我开始使用 css 模块时遇到问题 import class from './button.css' 不起作用所以我使用 import './button.css' 但是在这里面有很多 css 冲突,较高的组件范围 css 总是被较低的组件覆盖。所以谷歌了很多,终于找到了解决方案。
解决方案 从支持 typescript 的 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