Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

363
Views
Css style do not work in React , using Webpack for css-loader

I try to style my React component using an local file Css and a css-loader webpack , all libraries are up to date! No error show it cmd , when I try to run npm , or in console in localhost:8000, in browser. Code webpack:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
    
  },
};

css-file:

.muzee img{
    width                   : 60px;
    animation               : muzee 7s linear infinite;
}

.muzee {
    width                   : 100%;
    display                 : flex;
    color:black;
    background-color        :black;
    align-items             : center;
    justify-content         : space-around;
    position                : absolute;
    bottom                  : -70px;
}

React file:

import React, { Component } from 'react'
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { addLead } from '../../actions/leads';
import { Leads } from './Leads';
import './style.css'
import img from "./images/logoul.png";

//THE LAST OPTION :*(
/*(const muzee ={
      width                   : '100%',
    display                 : 'flex',
    color                   :'black',
    background_color        :'black',
    align_items             : 'center',
    justify_content         : 'space_around',
    position                : 'absolute',
    bottom                  : '-70px',
}
*/

export class MainPage extends Component {
      
            render() {
                  
                  return (
                        <div>
                        <div className='muzee'>
                        <img src={img}/>
                        <img src={img}/>
                        <img src={img}/>
                        <img src={img}/>
                        <img src={img}/>
                        <img src={img}/>
                        <img src={img}/>
                    </div>  
                       </div>
                  )
            }
      }

For me , this type of project is kinda new , so I really do not understand very well how this problem occur. Or please give me some info where I can see more about this task.Thx!

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!