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/**/*"  // 主要加上這一句代碼。
  ]
}