d.ts for css-module can't be generated with typings-for-css-modules-loader

Question

I'm trying to use CSS module with Typescript.

I tried with this configuration.

Webpack config

const path = require("path");
module.exports = {
    entry: "./client/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json", ".css"]
    },

    module: {
        rules: [
            { test: /\.css$/, loader: 'typings-for-css-modules?modules' },
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {
                test: /\.tsx?$/, loader: "ts-loader", options: {
                    configFile: __dirname + "/tsconfig.client.json"
                }
            },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },

};

I want to use CSS module with style codes written in Stylus. Therefore, I can't use typescript language service for this purpose.

I don't mind not to use this webpack plugin. If there are alternative solution, welcome to comment. I want to know best practice around this!

Other files

There are ./client/index.tsx and ./client/test.css with this code.

./client/index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as CSS from "./test.css";

class ControlPanelRoot extends React.Component<any, any> {
    public render() {
        return (
            <div>
                <img src="../public/logo.png" />
            </div>
        );
    }
}

./client/test.css

.aa{
    height: 100px;
    color: white;
}

.bb{
    display: inline;
}

But there was no definition file generated.

Anand · Accepted Answer · 2018-07-18 00:01:09Z

2

I think you have to use those classes defined in .css in your .jsx else they don't generate you need to use the imported styles in your code. If you just import them but not use them in the code they will be ignored.

https://github.com/Jimdo/typings-for-css-modules-loader/issues/27

answered Jul 18, 2018 at 0:01

Anand

4,56110 gold badges52 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3550446 · Accepted Answer · 2022-08-17 03:17:16Z

0

try out this webpack loader: react-css-component loader.

see an example with nextjs below:

const nextConfig = {
webpack: (config, { dev, isServer }) => {
    const rccLoaderRule = {
      test: /\.module\.scss$/,
      use: [
        {
          loader: 'rcc-loader',
          options: {
            enabled: !!dev && isServer,
            exportStyleOnly: true
          }
        }
      ]
    }

    config.module.rules = config.module.rules ?? []
    config.module.rules.push(rccLoaderRule)

    return config
  }
}

answered Aug 17, 2022 at 3:17

user3550446

4653 silver badges10 bronze badges

Collectives™ on Stack Overflow

d.ts for css-module can't be generated with typings-for-css-modules-loader

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related