create-react-app 与 sass 不加载样式

CSS

使用 create-react-app 创建的 React 应用程序默认支持导入和使用 Sass 样式表。然而，有时候我们可能遇到一些问题，导致 Sass 样式并未正确加载。本文将介绍一些常见的原因，以及解决这些问题的方法。

问题一：Sass 样式表未被加载

当我们在 React 应用程序中导入 Sass 样式表时，有时会发现样式并未正确加载。这可能是由于以下原因导致的。

首先，我们需要确保已正确安装并配置了 Sass。在使用 create-react-app 创建的应用程序中，默认已经集成了对 Sass 的支持。但是如果你手动更新了 create-react-app，可能会导致配置文件的变化，从而导致 Sass 样式未被正确加载。

其次，我们需要检查导入样式表的路径是否正确。在 React 中，我们使用相对路径来导入样式表。如果路径不正确，React 将无法找到样式表并加载它们。

解决方案一：检查 Sass 配置

首先，我们需要确保 Sass 已正确安装并配置。如果你是使用 create-react-app 创建的应用程序，默认已经具备对 Sass 的支持。你可以在 src 文件夹中找到 index.sCSS 文件，该文件由 index.JS 导入并加载样式。

如果你手动更新了 create-react-app，你需要检查项目根目录下的 package.JSon 文件。在 dependencies 或 devDependencies 中查找 node-sass 的版本，确保其安装正确。

如果你的 Sass 配置没有问题，你可以尝试重新启动应用程序，然后再次检查样式是否被正确加载。

解决方案二：检查样式表路径

如果你确定 Sass 已正确配置，但样式表仍未加载，那么问题可能是导入路径不正确。在 React 中，我们使用相对路径来导入样式表。

例如，如果我们有一个名为 styles.sCSS 的样式表文件，位于 src 文件夹下的 components 文件夹中，我们可以在组件文件中使用以下代码导入样式表：

JSx
import './components/styles.sCSS';

请确保路径名正确，并根据实际情况进行调整。

案例代码：

假设我们有一个名为 Button 的按钮组件，我们想要在其中使用 Sass 样式表。我们可以创建一个名为 Button.sCSS 的文件，并将其放置在 src 文件夹下的 components 文件夹中。接下来，我们可以在组件文件 Button.JS 中导入并使用这个样式表。

Button.sCSS:

sCSS
.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

Button.JS:

JSx
import React from 'react';
import './components/Button.sCSS';
const Button = () => {
  return (
    <button className="button">Click me</button>
  );
}
export default Button;

在上面的代码中，我们首先导入了样式表文件 Button.sCSS，然后在按钮组件中使用了 button 类名。这样，我们就能够正确加载并应用样式表了。

通过上述方法，我们可以解决 create-react-app 与 Sass 不加载样式的问题。确保正确配置 Sass 并使用正确的导入路径，我们就能顺利加载并使用 Sass 样式表了。