Как я могу получить доступ к className в функциональном компоненте из файла sass

Question

Когда я добавляю стиль с помощью html элементов, таких как <div> или body, он работает, но когда я использую .container для стиля, я не вижу изменений, любая помощь будет оценена

Мой authLayout.scss

@import './variables.scss';

* {
    margin: 0;
    padding: 0;
}

.container {
    background-color: red;
    color: red;
}

Мой компонент

import React from 'react';
import '../assets/scss/authLayout.scss';


export default function AuthLayout({ children }) {
  return (
    <div className="container">
      <h1>THIS THE AUTH LAYOUT</h1>
      {children}
    </div>
  );
}

Answer 1

1. Убедитесь, что вы установили node-sass в своем проекте React. Если нет, то в терминале используйте команду npm install node-sass -S
2. Изменить все . css расширение файла с .s css
3. Измените любой импорт для использования .s css
4. Теперь для @ import "./variables.scss" ; , сохраните файл variables.s css непосредственно в папке sr c (чтобы указать абсолютный путь) и выполните импорт в authLayout.s css файл выглядит следующим образом: @ import "variables.s css"; т.е. без нашего ./ (что означает относительный путь).
5. Наконец убедитесь, что import '../assets/scss/authLayout.scss'; путь правильный.

Надеюсь, что это поможет. Для дальнейшего посещения ресурса: https://scotch.io/tutorials/using-sass-in-create-react-app-v2