Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

367
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda