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!
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.