Module not found: Can’t resolve 'Assets/css/custom.css'

Question

I have a small problem when starting my project in React, when running the command Yarn start the terminal returns me the following error

./src/index.js
Module not found: Can't resolve 'assets/css/custom.css'

But in my index.js it is like this

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'
import { CookiesProvider } from 'react-cookie';
import { createBrowserHistory } from 'history';
import {
  Route,
  Switch
} from 'react-router-dom';

import { ConnectedRouter as Router } from 'react-router-redux';

import Default from 'common/layouts/default';

import indexRoutes from './common/routes';
import configureStore from './config/store';
import registerServiceWorker from './registerServiceWorker';
import {registerAxiosInterceptors} from './common/http/axios';

import "assets/css/materialize.css";
import "assets/css/custom.css";
import "assets/css/mediaqueries.css";
import "assets/fonts/font-awesome/css/font-awesome.min.css";
import "assets/css/ion.rangeSlider.css";
import "assets/css/ion.rangeSlider.skinHTML5.css";
import "assets/css/fotorama.css";

const store = configureStore();
const history = store.getHistory();

registerAxiosInterceptors();

ReactDOM.render(
   <CookiesProvider>
       <Provider store={store}>
          <Router history={history}>
            <Route path="/" component={Default} />
        {/* {
            indexRoutes.map((prop,key) => {
                return (
                    <Route
                        path={prop.path}
                        key={key}
                        component={prop.component}
                    />
                );
            })
        } */}
        </Router>
    </Provider>
</CookiesProvider>
, document.getElementById('root'));

registerServiceWorker();

Answer 1

The error may have happened for two reasons:

1. The actual referenced file does not exist

2. path "Assets/" is invalid

In the second case, check if there is a webpack alias for the "Assets folder/".

Something like:

alias: {
  assets: path.resolve(__dirname, 'src/assets/'),
}

Documentation on webpack alias

If this setting does not exist, change the import path to a relative path:

import "./assets/css/fotorama.css";