Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Custom TS types for Webpack + React ES6-Style Imports

Custom Typescript Types Recipes for React + Webpack ES6 style imports

use case: CSS files in /src/styles dir, and SVG and PNG files in /assets/images dir

  • custom.d.ts file in dir of svg, png assets:
declare module "*.svg" {
    const content: any;
    export default content;
}

declare module "*.png" {
    const content: any;
    export default content;
}
  • custom.d.ts file in styles dir alongside CSS files:
declare module "*.css" {
    const content: any;
    export default content;
}
  • include those files/custom types, in tsconfig.json in project root:
{
  "compilerOptions": {
    "outDir": "dist",
    "sourceMap": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  },
  "include": ["./src/**/*", "src/styles/custom.d.ts", "assets/images/custom.d.ts"]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment