我安装了npx create-react-app my-app --template typescript
然后加载CSS文件,然后出现如下错误:
用问题编译的
:x
./src/css/common.css (./node_modules/css-loader/dist/cjs.js??ruleSet1.rules.oneOf5.use1!./node_modules/postcss-loader/dist/cjs.js??ruleSet1.rules.oneOf5.use2!./src/css/common.css) 5:36-105中的错误
未找到模块:错误:无法解析‘../public/资产/映像/ico_check1_off.png’中的‘/卷/JsWeb/ejmComp/wooriga/web/src/css’
./src/css/common.css (./node_modules/css-loader/dist/cjs.js??ruleSet1.rules.oneOf5.use1!./node_modules/postcss-loader/dist/cjs.js??ruleSet1.rules.oneOf5.use2!./src/css/common.css) 6中的错误:36-104
未找到的模块:错误:无法解析‘../public/资产/映像/ico_check1_on.png’中的/卷/JsWeb/ejmComp/wooriga/web/src/css‘
我添加了文件images.d.ts
/// <reference types="react-scripts" />
declare module '*.png';
declare module "*.jpg";
declare module '*.png' {
const src: string;
export default src;
}
declare module "*.jpeg";
declare module "*.gif";
tsconfig.json
添加:
"compilerOptions": {
"target": "es5",
"typeRoots" : ["node_modules/@types", "src/types"],
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src",
"src/types/images.d.ts",
"**/*.ts", "**/*.tsx"
]
}
在没有webpack的情况下,如何从CSS文件中加载图像?
在CSS文件中出现的错误:
.custom { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; margin-right: 20px; background: url('../asset/images/ico_check1_off.png') center center no-repeat; background-size: contain; }
background: url('../asset/images/ico_check1_off.png')
发生错误
但是main.tsx
直接调用没有错误:
<Image src="../asset/images/ico_check1_off.png"/>
仅发生来自CSS文件的错误调用映像。
folder
public
- asset/images
src
- component / main
- main.tsx
- component / css
- common.css
发布于 2022-09-20 15:14:05
使用title.module.css可能会加载
https://stackoverflow.com/questions/73720210
复制相似问题