.scss 文件中的样式未应用

Question

我有一个 React 应用程序并使用 .scss 文件进行样式设置。

我的 index.js 看起来像这样：

import './App.scss';

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>,
    document.getElementById('root')
);

我的 App.scss 看起来像这样：

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body,
:global(#root) {
    min-height: 100%;
    color: var(--primary-font-color);
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
}

h1 {
    color: var(--primary-font-color);
    font-size: 32px;
    font-weight: 600;
    line-height: 36px;
}

:root {

    /*Colors */
    --primary-color: #f6f5f2;
}

现在我的问题是除了 *,*::before,*::after 和 :root 不适用。 在浏览器控制台中，我可以看到使用了 App.scss 并应用了 *,*::before,*::after 样式。此外，来自 :root 的所有变量都可以在那里找到。

我想使用 App.scss 文件作为全局样式，但我发现应用它们的唯一方法是使用 @import("App.scss") 在component.module.scss。将 App.scss 导入到每个模块会导致与导入一样多的重复项。这是处理 scss 样式的预期方法吗？

Answer 1

今天不建议将 Sass 用于全局样式，因为正如他们所写的 ->它可以生成比您想要的更多的文件 ->效果是你的性能更差。

我们可以在他们的主页上阅读这些信息，

我建议你使用一次简单的 CSS 文件作为变量、全局样式，然后你可以轻松地重用它们，如果你想作为开发人员使用 Sass，那么就继续其余造型

最好！

Answer 2

例如，您可以执行以下操作

App.css：

body {
  margin: 0;
  font-family: Lato, Helvetica, Arial, sans-serif;
  transition: all 0.3s linear;
}

:root {
  --facebook-color: #507dc0;
}

然后：

Login.scss

body {
  .login {
    background-color: var(--facebook-color);
  }
}

当然这只是示例。

Answer 3

我找到了解决方案：

看起来是 :global(#root) 导致了问题。删除它会应用其他样式，无论它们是在 .scss 还是 .css 文件中。