How to import CSS file into ReactApp?

Question

I'm trying to import a css file into a react app, but all i've got is

Module parse failed: Unexpected token (1:6) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I tried everything, including the other StackOverflow questions about this subject, but none of them worked for me

My React code:

import React from 'react'
import './components/App.css'

class App extends React.Component {
render() {
return (
    <div className='container'>
        <title>
            Chamados
        </title>

        <section className='main-wrapper'>
            <header>
                <h1>LOGIN</h1>
            </header>

            <form>
                <input type="text" name="user" id="user" placeholder='Usuário' focus autoComplete='no'/>
                <input type="password" name="pass" id="pass" placeholder='Senha'/>
                <input type="submit" value="SIGN IN" id='bSignIn'/>
            </form>
        </section>
    </div>
)
}
}


export default App

My Css Code:

header{
    text-align:center;                    
    margin-top:30%

}
.container{
    margin:0px;
    padding:0px
}
.main-wrapper{
    height:450px;
    width: 300px;
    padding: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-image: linear-gradient(#FFFAF0,#E6E6FA);
    align-items: center;
    border-radius:5px;
    box-shadow: 1px 1px 15px #b3b3b3 !important;
}
.form{

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
input[type = "text"], input[type = "password"]{
    height:30px;
    width:250px;
    border: none;
    outline:none;
    border-radius: 0;                    
    background:none;
    display:block;
    margin: 20px auto;
    text-align:center;
    border-bottom:2px solid #adadad;                   

}


#bSignIn{
    outline:none;
    border: 0 none;
    border-radius: 0;
    height:50px;
    width:250px;
    background-image: linear-gradient(to right,#ADD8E6,#E0FFFF)
}

You must share your webpack configuration instead of your app. The error is reporting you that webpack is not able to handle the CSS resource, so you are missing a loader. — keul
– keul, Commented Dec 24, 2019 at 13:21

Alexander van Oostenrijk · Accepted Answer · 2019-12-24 13:23:27Z

1

It looks like your Webpack configuration is missing a CSS loader, so it doesn't know what to do the CSS file you are trying to import.

Make sure you have css-loader installed in your project:

npm install --save-dev css-loader

Then add the css-loader to your webpack config file:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

answered Dec 24, 2019 at 13:23

Alexander van Oostenrijk

4,7843 gold badges25 silver badges37 bronze badges

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

5 Comments

Thiago Robles Over a year ago

Where do I find the webpack ?

Alexander van Oostenrijk Over a year ago

That would be your webpack.config.js file.

Alexander van Oostenrijk Over a year ago

If you're using create-react-app, you won't have direct access to the webpack config file. Please see here.

Thiago Robles Over a year ago

That's weird, cause I created using create-react-app, but I don't have this folder. Look here imgur.com/XxUBYpr Instead, I have a Folder called webpack, but there's no config file there

Alexander van Oostenrijk Over a year ago

Yes, please see my previous comment.

Collectives™ on Stack Overflow

How to import CSS file into ReactApp?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related