I just went through this, and seems that there are lot of people lost or not finding the right answer. This is what I did:

Get control over the configuration

npm run eject

Running this command will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project, as you noted all that was inside a npm module called react-script. Do not modify this package directly!

Install sass compiler and webpack loader

npm install sass-loader node-sass --save-dev

At this point you have to install the sass compiler and the webpack loader as development dependencies.

Modify the webpack configuration

1. Open config\webpack.config.dev.js.

2. Add /\.scss$/, to the exclude array in the url loader, it will look something like this after the update:

   exclude: [
       /\.html$/,
       /\.(js|jsx)$/,
       /\.css$/,
       /\.json$/,
       /\.svg$/,
       /\.scss$/, //Add this line
   ],
   

3. Add the SASS/SCSS loader:

   {
       test: /\.scss$/,
       loaders: ['style', 'css', 'sass']
   },
   

According to the React Static Boilerplate website, they use CSS Modules - this would explain why the body tag is being respected but the class selector is not.

https://github.com/css-modules/css-modules

try importing the stylesheet like so:

import styles from './MyComponent.css';

The using it in your component like so:

<div className={styles.card}>something!</div>

Sass is not recommended to use today for global styles, because as they wrote -> it can generate more files than you want -> effect is that you have worse performance

This information we can read on their main page

I recommend you use once simple CSS file for variables, global styles then easily you can reuse them and if you wanna use Sass as a developer then go-ahead for the rest of styling

Best!

Hey, I figured it out!
- I got rid of live-sass-compiler (it's depreciated).
- I also removed the "script: "compile:sass": "node-s..."" as it's no longer required. Compilation will happen natively every time you save the file.

TO USE WITH REACT:

Terminal:

npm install -D sass
sass —watch scss:css

1. add an .env file to the root. Inside type: “SASS_PATH=src/STYLES/SCSS”

(this allowed relative paths to be ignored on previous versions. I haven't gotten this to work but everything else seems to work. It may be depreciated... IDK.)

2. include the filepath import to the JS page you’d like the CSS to live under:

(example (for APP-WIDE Changes): index.js: import './STYLES/index.scss’ //imports to the app component

3. to import another file from index.scss: Within the index.scss file: @use './SCSS/_unorganized.scss'; // ("@import" will soon be depreciated, instead use @use)

Hope this saves someone else some time!

In a react project created with create-react-app or npx create-react-app, I also had the same issue.

I had imported index.css file in my App Component but my styles were not being applied properly to my React Components.

I even tried directly adding index.css file in my html file in the public folder and using link tag to link to my index.css file (which resides within src folder).

<link rel="stylesheet" href="./../src/index.css">

That also didn't work.

Finally, I read an article about 7 ways to apply CSS into React. One best way was to install node-sass into our project and use index.scss ( import './index.scss') into App Component instead of index.css.

And Hurray!!! My CSS worked fine, All the Media Queries started to work fine.

Below is the code snippet you can try.

import React from "react";
import ReactDom from "react-dom";
import './index.scss';


// --- Data to work with ---
const books = [
  {
    id: 1,
    name: 'The Rudest Book Ever',
    author: 'Shwetabh Gangwar',
    img: 'https://m.media-amazon.com/images/I/81Rift0ymZL._AC_UY218_.jpg'
  },
  {
    id: 2,
    name: 'The Rudest Book Ever',
    author: 'Shwetabh Gangwar',
    img: 'https://m.media-amazon.com/images/I/81Rift0ymZL._AC_UY218_.jpg'
  },
  {
    id: 3,
    name: 'The Rudest Book Ever',
    author: 'Shwetabh Gangwar',
    img: 'https://m.media-amazon.com/images/I/81Rift0ymZL._AC_UY218_.jpg'
  },
  {
    id: 4,
    name: 'The Rudest Book Ever',
    author: 'Shwetabh Gangwar',
    img: 'https://m.media-amazon.com/images/I/81Rift0ymZL._AC_UY218_.jpg'
  },
];


const Book = ({ book }) => {
  return (
    <div className={"book"}>

      <img src={book.img} alt="book image" />

      <h3>{book.name}</h3>
      <p>{book.author}</p>
    </div>
  )
};

const Books = () => {
  return (
    <main className={"books"}>
      {
        books.map(book => {
          return (<Book book={book} key={book.id} />)
        })
      }
    </main>
  )
};


// Work a bit fast | one step at a time
const App = () => {
  return (
    <main>
      <h2>Books</h2>
      <Books />
    </main>
  )
}

ReactDom.render(<App />, document.getElementById("root"));

/* --- Mobile First Design --- */
.books{
  text-align: center;
};

.book{
  border: 1px solid #ccc;
  text-align: center;
  width: 200px;
  padding: 1rem;
  background: #001a6e; 
  color: #fff;
  margin:auto;
};

h2{
  text-align: center;
}

/* --- Adding Media Queries --- */
@media only screen and (min-width: 900px){
  .books,.persons{
    display:grid;
    grid-template-columns: 1fr 1fr;
  }
}

To install node-sass, simple do npm install node-sass --save Then rename all your .css files with .scss and your project with work properly.

The package.json should have the node-sass dependency added as shown below:

 "dependencies": {
    "node-sass": "^4.14.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-scripts": "2.1.5"
  },

Hope this will help many developers :)

Your webpack configuration may be changing the class name depending on its settings. (CSS Modules enabled, though your comment about stylesheet intact implies it's not).

Since you are importing the './style.css' file, try referencing the class name like: style.foo. Ex:

<div className={ style.foo }>foo div</div>

This article: http://javascriptplayground.com/blog/2016/07/css-modules-webpack-react/ describes the pattern of importing and referencing the class name pretty well.