Module build failed: SyntaxError: Unexpected token (10:0) when adding css to .css file

Question

I have added the following code to a .css file which is linked to a React component.

.navbar-brand {
color: #333;
}

a {
color: #333;
font-weight: 200;
}

These are the import statements in my .jsx file:

import React,{ Component } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';


class Navbar extends Component {
render() {
    return (

        <nav className="navbar navbar-expand-md">
            <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="container">

            <div className="collapse navbar-collapse" id="navbarCollapse">
                <ul className="navbar-nav ml-auto">
                <li className="nav-item active">
                    <Link className="nav-link" to="/">Home <span className="sr-only">(current)</span></Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/">Link</Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/about">About</Link>
                </li>
                </ul>
              </div>
            </div>
        </nav>


    );
  }
}

export default Navbar;

Does this have something to do with the path of the .css file? Any help would be appreciated. This is the error it is giving me in the console.

ERROR in ./src/components/Navbar.css
Module build failed: SyntaxError: Unexpected token (10:0)

 8 |     font-weight: 200;
 9 | } */
 > 10 | .navbar-brand {
 | ^
 11 |     color: #333;
 12 | }