SASS 部分导入在反应中不起作用答案

【问题标题】：SASS partial import doesn't work in reactSASS 部分导入在反应中不起作用
【发布时间】：2019-10-10 11:35:46
【问题描述】：

我现在练习 SASS 编码发明。我使用npx create-react-app 制作了 React 应用程序。

我的结构如下。

src
├── test
│   ├── _index.scss
│   utils
│   ├── _index.scss
│   └── _mixins.scss
│
├── main.scss
...

我在main.scss 中导入了scss 文件。

@import "components";
@import "utils";

但是，它会导致错误，我不知道我做错了什么。

Failed to compile.

./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/styles/main.scss)
Module not found: Can't resolve './components' in '~/src/styles'

【问题讨论】：

您没有components.scss 文件？你为什么要声明@import "components";？
@OlivierBoissé，components 是文件夹名称。我将在这个文件夹中制作一些组件文件样式，并尝试将components 文件夹导入main.scss
@OlivierBoissé 我看到了这篇文章。 sass-lang.com/documentation/at-rules/import
注释掉导入，直到有文件要导入。
@BugsArePeopleToo，我之前已经尝试注释掉@import components。我制作了_index.scss 文件来导入utils 文件夹中的每个scss 文件，但效果不佳。

标签： javascript node.js reactjs ecmascript-6 sass

【解决方案1】：

你的代码应该是

@import "./utils/_index";
@import "./utils/_mixins";

您必须指定 scss 文件的相对路径，否则您的代码将无法运行

【讨论】：

感谢您的回复。我知道这种方式。如果您不介意，可以查看this 吗？我看到了这篇文章，我正在尝试这个
@MingyuJeon 你想问什么？我的代码有效吗？
是的，您的代码正在运行。我的意思是我已经知道这一点，但我想尝试另一种方式，比如link。这家伙不带路径导入，只写文件夹名。
是的，你可以这样做，默认情况下 sass 可以导入这样的文件夹
@MingyuJeon 如果我的问题解决了您的问题，请接受我的回答。谢谢