react项目中外部资源添加

1. css模块化加载

// 在js文件中加载 css 模块  (css in js (jss))
import styles from './App.module.css' // .module.css 为模块化css的命名规范
         
//标签上引用
 return (
    <div className={styles.App}>
    // style 会转换为对象
    
   <div  className={styles.robotList}>
     {robots.map(r=>(<Robot id={r.id} name={r.name} email={r.email}/>))}
   </div>
   </div>
  );

相较于传统的 import '/app.js' , 该模式是按需加载 , 不会将app.css的全部样式导入jsx文件中 , 只会导入标签所需文件 , 同时也会避免造成全局css污染

2. 在typescript中使用css模块化加载

// 1. 安装css处理插件  ( 安装在dev依赖中)
npm install typescript-plugin-css-modules --save-dev
//2 . 编写类型声明文件 ( ts 需要编写类型声明文件 )
// custom.d.ts (后缀必须为.d.ts)
declare module "*.css" {
    const css:{[key: string]:string};
    export default css
}
//3 . 在tsconfig.json 中配置 插件
"compilerOptions": {
  //添加
 "plugins":[{"name": "typescript-plugin-css-modules"}]
}
// 4 . 在vscode编辑器中新建.vscode文件夹和settings.json
//并添加一下代码
{
    "typescript.tsdk": "node_modules/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true
}
//这样 , 在App.tsx 中引入css模块也会出现相应提示

3. 引用字体文件 , 将ttf格式文件放在assets/fonts , 在index.css文件中进行引用

@font-face {
  font-family: 'Slidefu'; // 字体名称
  src: local('Slidefu'), url(./assets/fonts/Slidefu-Regular-2.ttf) format('truetype');
}
   
//在需要添加字体的类中添加
 font-family: 'Slidefu';