react 项目设置css模块化 React 项目设置css模块化

React 项目设置css模块化

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

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

２.在项目的下建一个文件夹 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/**/*"  // 主要加上这一句代码。
  ]
}