I am in the process of incorporating a CSS module into the login component. Currently, I have a style.css stylesheet located in the src/styles folder, which is responsible for loading global styles. However, I now want to customize the login component by adding a login.css file within the components/login directory:
.button {
background-color: black;
}
The code snippet from my LoginPage.js component is as follows:
import React from 'react';
import styles from './Login.css';
class LoginPage extends React.Component {
render() {
return (
<div className="jumbotron col-md-6 col-md-offset-3">
<div className="container">
<form name="form">
<div className="form-group">
<label htmlFor="username">Username</label>
<input type="text" name="username" className="form-control" required />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password" name="password" className="form-control" required />
</div>
<div className="form-group">
<button className="btn btn-primary">Login</button>
</div>
</form>
</div>
</div>
);
}
}
export default LoginPage;
My webpack configuration is throwing the following errors:
src\components\login\LoginPage.js (2/2)
✖ 2:20 Parse errors in imported module './Login.css': Unexpected token . (1:1) import/namespace
✖ 2:20 Parse errors in imported module './Login.css': Unexpected token . (1:1) import/default
! 2:20 Parse errors in imported module './Login.css': Unexpected token . (1:1) import/no-named-as-default
! 2:20 Parse errors in imported module './Login.css': Unexpected token . (1:1) import/no-named-as-default-member
This is an excerpt from my webpack.config.js:
import webpack from 'webpack';
import path from 'path';
export default {
debug: true,
devtool: 'inline-source-map',
noInfo: false,
// Remaining content would be same.
};
When trying to implement the CSS module in JSX, I encountered a problem:
<div className="form-group">
<button className={styles.button}>Login</button>
</div>
src/components/login/LoginPage.js: JSX value should be either an expression or a quoted JSX text (19:32)
Any guidance on correctly setting up CSS modules for React would be appreciated.
EDIT:
After addressing the error related to loading the class, the updated syntax looks like this:
<div className="form-group">
<button className={styles.button}>Login</button>
</div>
Now, although the CSS is successfully loaded, the webpack errors and warnings persist.