typeScript 中导入样式文件报错？静态文件.css,.scss,.less,.jpg,.png,.json 和./*vue

typeScript 中导入样式文件报错？静态文件.css,.scss,.less,.jpg,.png,.json 和./*vue - 前端笔记-原因： /** * 原因: 此时会发现编译器会提示个错误：找不到模块“./app.vue”，.css，.less，.json或其相应的类型声明 * 因为直接引入.v...

首页>> web前端 >>typeScript 中导入样式文件报错？静态文件.css,.scss,.less,.jpg,.png,.json 和./*vue - 前端笔记

2022-8-10

分类： web前端

文章作者：痴迷

原因： /** * 原因: 此时会发现编译器会提示个错误：找不到模块“./app.vue”，.css，.less，.json或其相应的类型声明 ......

原因：

		/**
	
		 * 原因: 此时会发现编译器会提示个错误：找不到模块“./app.vue”，.css，.less，.json或其相应的类型声明
	
		 * 因为直接引入.vue文件 TS会找不到对应的类型声明；所以需要新建typings（命名没有明确规定，TS会自动寻找.d.ts文件）文件夹来专门放这些声明文件。
	
		 *
	
		 * TypeScriptTS默认只认ES 模块。如果你要导入.vue文件就要declare module把他们声明出来。
	
		 */

解决办法

第一步，在 src目录下新建一个 typings.d.ts 文件写入如下配置

		declare module '*.json';
	
		declare module '*.png';
	
		declare module '*.jpg';
	
		declare module '*.scss';
	
		declare module '*.ts';
	
		declare module '*.js';

第二步，在根目录新建一个tsconfig.json文件在配置一下下面配置

		{
	
		    "compilerOptions": {
	
		      "baseUrl": ".",
	
		      "jsx": "react",
	
		      "allowSyntheticDefaultImports": true,
	
		    },
	
		  }