Make class import by component dynamically (Ionic + React)

Ionic Framework Ionic React
1

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.

2

I don’t know but I would strongly recommend creating a new app using Create React App or creating a fresh Ionic React app using the Ionic CLI.

By default CSS files are importable if you follow the above steps, so it seems your specific build setup is broken or the CSS file doesn’t exist.