Guide on integrating module css with typescript in a Gatsby project

I am working on a GatsbyJS application and currently facing an issue with integrating TypeScript. Although I have resolved most of the problems, I am unable to get the CSS modules to work properly.

In my file, I have this import statement that functions correctly:

import styles from "./card.module.css"

However, after adding the TypeScript configuration, it shows an error stating 

Cannot find module './card.module.css'.ts(2307)

Despite trying different Gatsby plugins, none of them yielded the expected results.

You can find the complete code here: GitHub

csstypescriptgatsby

Answer №1

I encountered a similar issue and after experimenting with various plugins, I stumbled upon a solution that resolved the problem for me.

To fix it, you need to create a css.d.ts file containing:

declare module '*.css' {
    const content: { [className: string]: string };
    export default content;
}

Next, add these lines to your tsconfig.json file:

"esModuleInterop": true,
"files": ["./src/typings/css.d.ts"]

Make sure that the "files" path matches the location of your type definition file.

For more information, visit this link.

Answer №2

After experimenting with various plugins, I highly recommend utilizing gatsby-plugin-dts-css-modules (confirmed compatibility with Gatsby v5).

Installation

npm install gatsby-plugin-dts-css-modules --save-dev
# or
yarn add gatsby-plugin-dts-css-modules --dev

Configuration

// gatsby-config.ts
const config: GatsbyConfig = {
    // ...
    plugins: [
        // ...
        `gatsby-plugin-dts-css-modules`, // enable CSS modules support with TypeScript
    ]
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

IE - Adjusting the Width of the Vertical Spry Menu Bar

As I delve into the world of web design using Dreamweaver, I find myself faced with some challenges as a beginner. One specific issue I'm encountering is related to a vertical Spry Menu Bar on my website that functions well in most browsers except for ...

cssinternet-explorerdreamweaverspry

Tips for creating animated images with a mask or clip using HTML, CSS, and jQuery

I am attempting to animate the movement of an image under a stationary mask. I have 2 methods for achieving this: one using the mask property and the other using clip First method using Mask : View working script at http://jsfiddle.net/2Aecz/ or below & ...

jqueryhtmlcssanimationhtml5-canvas

Assistance required in forming a Button Group featuring a Pointer Shape

https://i.sstatic.net/bBwqi.png I came up with this idea for a button group. <div class="btngroup"> <button type="button" class="btn">Organization</button> <button type="button" class="btn">Project</button> <butto ...

htmlcss

Automate the process of making Tailwind Classes non-Global with ease!

I am currently working on an application that consists of two main parts: (X) an older AngularJs legacy application with its own set of CSS classes. (Y) a new React application contained within a div. This new part (Y) is built using webpack, postcss, and ...

javascriptcssreactjstailwind-csscss-in-js

Spin background from center to edge

My goal is to create a CSS design that works seamlessly on all screen sizes. I want the background to transition from blue on the left side to white on the upper middle to the right bottom corner. Here is my current code snippet: <style> .wrapper { ...

cssbackground-colorcss-transforms

What is the reason behind capitalizing all words within <p> elements?

Why are all the words in my sentences capitalized randomly? Below you can see snippets of my HTML and CSS code. Any help would be greatly appreciated. Thank you in advance! HTML <!DOCTYPE html> <html lang="en"> <head> & ...

javascriptphpjquerycss

The dynamic key for an object is not being inferred by Typescript

In my Redux action, I have a simple setup: export interface UpdateUserSettingsPayloadType { videoInput?: MediaDeviceInfo; audioInput?: MediaDeviceInfo; audioOutput?: MediaDeviceInfo; } export const updateUserSettings = ( payload: UpdateUserSetting ...

typescriptreduxreact-redux

What are some potential disadvantages of using `import type` or activating the `@typescript-eslint/consistent-type-imports` rule in ESLint?

Recently, I encountered an issue that was resolved by utilizing the import type feature in TypeScript instead of just using import. It came to my attention that there exists an eslint rule called @typescript-eslint/consistent-type-imports which, when activ ...

typescripttypescript-eslint

What is the best method for accessing Blob data in Deno?

Currently, I am attempting to read from a websocket within Deno. Below is the code snippet (please note that you will require an API key from AISstream for it to function properly) /** * URL used by the API; this might change if the version changes or at ...

typescriptwebsocketdeno

Stop the bubbling effect of :hover

How can the hover effect be prevented for the parent element when hovering over its children? Please take a look at the following code snippet: const parent = document.getElementById('parent') parent.onmouseover = function testAlert(e) { /* ...

javascripthtmlcsssass

The changing perspective in relation to the current position of a background

I am currently working on implementing a parallax effect, which is mostly successful. However, I have encountered a minor issue. Instead of the parallax effect being relative to the element's current position, it abruptly jumps to position 0. How can ...

javascriptjqueryhtmlcss

Explore one of the elements within a tuple

Can we simplify mapping a tuple element in TypeScript? I'm seeking an elegant way to abstract the following task const arr: [string, string][] = [['a', 'b'], ['c', 'd'], ['e', 'f']] const f ...

javascripttypescript

A guide to setting a file size limit for image uploads (e.g. limiting to 2MB) using Angular

We are currently working on implementing a maximum size limit of 2mb for images using ng2-file-upload. Below is the code snippet: uploader: FileUploader = new FileUploader({ url: URL, disableMultipart: true }); ... ... OnFileSelected(event) { ...

angulartypescriptangular6ng2-file-upload

Steps for displaying a bootstrap modal in alignment with the triggering button's position

Recently diving into the world of bootstrap and AngularJs has been quite the learning experience for me. One challenge I encountered was trying to implement a bootstrap modal dialog box to show additional details within a table column. My goal was to hav ...

javascripthtmlcssangularjstwitter-bootstrap

Is a non-traditional fading effect possible with scrolling?

I have implemented a code snippet to adjust the opacity of an element based on scrolling: $(window).scroll(function () { this = myfadingdiv var height = $(this).height(); var offset = $(this).offset().top; var opacity = (height - homeTop + ...

javascriptjquerycss

Guide to adding content and icons to the top navbar on the right side using vue.js

In the process of developing a fixed top navbar, I encountered an issue while trying to add right side icons and additional content. The goal is to include two icons, as shown in this example: example link, along with profile and cart information on the ri ...

htmlcssvue.jssass

Tips for concealing the delete button within the main content area and displaying it in the subsequent "add" pop-up window upon clicking the "add" button in Angular

I have a card with add and delete buttons. I want only the add button to show initially, and when clicked, a new card should open with both add and delete buttons. Everything is working as expected except I can't figure out how to hide the delete butt ...

javascripthtmlangulartypescript

Enforce boundaries by constraining the marker within a specified polygon on a leaflet map

Currently, I am utilizing a leaflet map to track the user's location. The map includes a marker for the user and a polygon shape. My goal is to ensure that the user marker always stays within the boundaries of the defined polygon. In case the user mov ...

angulartypescriptleaflet

Trouble Aligning a CSS3 Canvas Within a Div

I'm facing a dilemma with my HTML code: <div id=test> <canvas id="pic" width="300" height="250"></canvas> </div> Whenever I attempt to adjust the width and height using CSS (by removing the width ...

csshtml5-canvas

Develop a custom WordPress meta box for managing the color scheme of individual posts and pages

Currently, I am in the process of learning how to create a custom WordPress meta box with a select tag for controlling the color scheme of individual posts/pages. My goal is to implement a system where I can use if statements to load an additional CSS file ...

csswordpressselectmetabox