标签：scss typescript ts react 添加 true

重学前端 - react： 添加ts + scss

• 简介： 上一节我们新建了 react 项目。项目中并没有使用 ts + scss. 现在我们为项目添加 ts + scss。是项目后期维护更加方便，也为他团队提供书写规范。

安装 typescript 相关 module

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

推荐：https://create-react-app.dev/docs/adding-typescript/
https://github.com/typescript-cheatsheets/react#reacttypescript-cheatsheets
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

添加 tsconfig.json

在项目根目录下添加 tsconfig.json 文件, 文件内容如下：

{
  "compilerOptions": {
    "target": "es5",
    "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"
  ]
}

修改改 index.js App.js 文件为 index.tsx App.tsx

重新启动项目

添加 scss 支持

npm install sass-loader node-sass --save-dev

修改 App.css 为App.scss 编写 scss 代码 重新运行项目

标签：scss,typescript,ts,react,添加,true
来源： https://www.cnblogs.com/yidejiyi/p/16272854.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。