0

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!

7
  • in modern react you don't need to configure webpack to import css i think it's done automatically. are you sure about the path or the file name? Commented Oct 13, 2021 at 19:12
  • Duplicate stackoverflow.com/questions/49212843/… ? For me, I use scss, just needed to import the file. yarn add node-sass, then you could rename that .css file to .scss and import regularly. Otherwise I imagine it is some kind of build problem. Commented Oct 13, 2021 at 19:33
  • @Ki If i did not use a loader , console did me an error containing that i do not have an loader for this.The path is correct , anithing ?Thx for your time! Commented Oct 14, 2021 at 5:55
  • how to you create the react app? whats the react version Commented Oct 14, 2021 at 7:52
  • @Ki my react version is : "react": "^17.0.2" Commented Oct 14, 2021 at 8:01

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.