Make class import by component dynamically (Ionic + React)

I followed Udemy course where it says I can modify the webpack config file in order to import classes easily. This is simple for only React.

import classes from './InputField.css';

However, with Ionic + React, this throws an errors

/Users/<me>/Documents/GitHub/learn_frontend/mobile-app/src/components/InputField/InputField.tsx
TypeScript error in /Users/<me>/Documents/GitHub/learn_frontend/mobile-app/src/components/InputField/InputField.tsx(3,21):
Cannot find module './InputField.css'.  TS2307

    1 | import { IonRow, IonItem, IonLabel, IonCol, IonInput } from '@ionic/react';
    2 | import React from 'react';
  > 3 | import classes from './InputField.css';
      |                     ^
    4 | 
    5 | interface MyState {
    6 |   value: any;

I modified the webpack config file as

            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                modules: true,
                localIdentName: '[name]__[local]__[hash:base64:5]',
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },

Please let me know how can I make the classes importable as show above.

1 post - 1 participant

Read full topic