美文网首页
react 项目设置css模块化

react 项目设置css模块化

作者: 51bitquant | 来源:发表于2020-05-22 19:17 被阅读0次

React 项目设置css模块化

1. 在项目下面的node_modules/react-scripts/config/webpack.config.js文件下面修改.

  getStyleLoaders({
                importLoaders: 1,
                modules: true,  // 加上modules为true.
                sourceMap: isEnvProduction && shouldUseSourceMap,
              })

2.在项目的下建一个文件夹 typings文件夹,并创建文件index.d.ts

加入代码

```
declare module ".png";
declare module "
.css";
declare module "*.svg";
```

3.0 修改tsconfig.json文件

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src/**/*",  
    "typings/**/*"
  ]
}

主要是新加上

"include": [
    "src/**/*",  
    "typings/**/*"  // 主要加上这一句代码。
  ]
}

相关文章

  • react 项目设置css模块化

    React 项目设置css模块化 1. 在项目下面的node_modules/react-scripts/conf...

  • 问题集

    css 模块化在 tsx 文件引入不正确 搭建好的 React 项目。https://www.jianshu.co...

  • webpack里使用hash的坑

    背景:我在react项目里使用了css modules。按照在webpack中的标准配置流程,需要设置下css-l...

  • create-react-app支持CSS Modules

    我们已经搭建了一个react项目,为了避免class命名冲突,现在我们想要支持css模块化开发。我们已经释放了we...

  • React项目build失败之MiniCssExtractPlu

    React项目build失败之MiniCssExtractPlugin React项目,最新依赖"mini-css...

  • React Native 样式表

    React Native中没有使用CSS来进行样式定义,因为CSS的引入全局设置的缺点。 React Native...

  • react+three.js 设置背景颜色或图片

    介绍两种方法来实现 在react项目中为three.js生成的内容设置背景 1.通过css设置canvas 的背景...

  • 2018-07-25 有得有失--在React中使用classN

    由于React中css模块化的原因,原先写页面时简单的css :onhover 变得需要js来操控监听事件,动态添...

  • css in react

    在react设置css样式有两种方式,style和外部css引入 style 以{}包裹一个css对象 css引入...

  • react学习笔记

    公司最近要做react的项目,所以,小白继续学习中……整理笔记如下…… React 和 Vue的对比 模块化:从代...

网友评论

      本文标题:react 项目设置css模块化

      本文链接:https://www.haomeiwen.com/subject/nvecahtx.html