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

时间:2020-03-14 09:56:30

标签: javascript reactjs sass

当我通过<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>
  );
}

1 个答案:

答案 0 :(得分:1)

  1. 确保已在React项目中安装了node-sass。 如果没有,那么在终端中使用命令 npm install node-sass -S
  2. 使用 .scss
  3. 更改所有 .css 文件扩展名
  4. 更改任何导入以使用 .scss
  5. 现在输入 @import“ ./variables.scss”; , 将 variables.scss 文件直接保留在src文件夹中(以提供绝对路径),并在 authLayout.scss 文件中进行导入,如下所示: @import“ variables.scss”; 即,带有./(表示相对路径)。
  6. 最后确保 import'../ assets / scss / authLayout.scss'; 路径正确。

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