phone input styles not injected. with redux-form HOC.

Im using redux-form Field component as parent, i can connect to the redux store and submit the input properly, but the css is not present, i tried importing the css to the component and also import it to the page where i use this component. but no success whereever i import the css. am i missing something? it looks like this : https://imgur.com/a/GtoGD

import React from 'react';
import PropTypes from 'prop-types';
import { Field } from 'redux-form';
import Phone from 'react-phone-number-input';
import rrui from 'react-phone-number-input/rrui.css';
import rpni from 'react-phone-number-input/style.css';

import { required } from '../../../app/reduxFormFieldValidation';

export class WizardPhoneNumberInput extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      phone: '',
    }
    this.handleOnChange = ::this.handleOnChange;

  }

  handleOnChange(phone) {
    this.setState({
      phone,
    })
  }

  render() {
    const { name, isRequired } = this.props;
    const validator = isRequired ? [required] : [];

    return (
      <Field
        name={name}
        component="text"
        validate={validator}
        value={this.state.phone}
      >
        <Phone
          country="US"
          onChange={this.handleOnChange}
        />
      </Field>
    );
  }
}

WizardPhoneNumberInput.propTypes = {
  name:       PropTypes.string.isRequired,
  isRequired: PropTypes.bool,
}

WizardPhoneNumberInput.defaultProps = {
  isRequired: true,
}

and then using it in some page like this <WizardPhoneNumberInput isRequired={required} name={name} {...rest} />

my webpack css config:

      {
        test: /\.css$/,

        use: [
          'style-loader',
          {
            loader:  'css-loader',
            options: {
              modules:        true,
              // sourceMap:      true, // Disabled, due to https://github.com/webpack-contrib/style-loader#url
              importLoaders:  2,
              localIdentName: '[name]__[local]___[hash:base64:5]',
            },
          },
          {
            loader:  'postcss-loader',
            options: {
              options: {
                // sourceMap:      true, // Disabled, due to https://github.com/webpack-contrib/style-loader#url
              },
              plugins: () => {
                return [
                  require('postcss-import'),
                  require('postcss-mixins'),
                  require('postcss-each'),
                  require('postcss-cssnext'),
                  require('autoprefixer'),
                ];
              },
            },
          },
        ],
      },

[catamphetamine]

The only difference seems to be

            options: {
              modules:        true,
              // sourceMap:      true, // Disabled, due to https://github.com/webpack-contrib/style-loader#url
              importLoaders:  2,
              localIdentName: '[name]__[local]___[hash:base64:5]',
            },

Perhaps regular CSS styles don’t work with CSS modules. Yeah, that might be so. I myself am not using CSS modules.

[eliranamar]

SOLVED i excluded the RPNI from the first test, made a separate one for it, and it worked. probably not connected to redux-form.

      {
        test: /\.css$/,
        exclude: /react-phone-number-input/,

        use: [
          'style-loader',
          {
            loader:  'css-loader',
            options: {
              modules:        true,
              // sourceMap:      true, // Disabled, due to https://github.com/webpack-contrib/style-loader#url
              importLoaders:  2,
              localIdentName: '[name]__[local]___[hash:base64:5]',
            },
          },
          {
            loader:  'postcss-loader',
            options: {
              options: {
                // sourceMap:      true, // Disabled, due to https://github.com/webpack-contrib/style-loader#url
              },
              plugins: () => {
                return [
                  require('postcss-import'),
                  require('postcss-mixins'),
                  require('postcss-each'),
                  require('postcss-cssnext'),
                ];
              },
            },
          },
        ],
      },
      {
        test: /react-phone-number-input\/.*\.css$/,

        use: [
          'style-loader',
          {
            loader:  'css-loader',
          },
          {
            loader:  'postcss-loader',
            options: {
              plugins: () => {
                return [
                  require('autoprefixer'),
                ];
              },
            },
          },
        ],
      },