Question

当我通过<div>之类的HTML元素或正文添加样式时，它可以工作，但是当我使用.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

确保已在React项目中安装了node-sass。如果没有，那么在终端中使用命令 npm install node-sass -S
使用 .scss

.css

更改任何导入以使用 .scss
现在输入 @import“ ./variables.scss”; ，将 variables.scss 文件直接保留在src文件夹中（以提供绝对路径），并在 authLayout.scss 文件中进行导入，如下所示： @import“ variables.scss”; 即，带有./（表示相对路径）。
最后确保 import'../ assets / scss / authLayout.scss'; 路径正确。

希望会有所帮助。有关更多资源，请访问：https://scotch.io/tutorials/using-sass-in-create-react-app-v2

我如何从sass文件访问功能组件中的className

1 个答案: