在前端开发中，使用 SASS 可以使我们的 CSS 代码更加易读易维护。但是在使用 SASS 的过程中，我们经常会遇到 “File to import not found” 的错误，这是因为 SASS 无法找到所需要的文件。本文将介绍如何避免这种错误，让你的 SASS 代码更加顺畅。
1. 确保文件路径正确
当我们在 SASS 中使用 @import 导入文件时，SASS 会根据相对路径去查找文件。因此，我们需要确保文件路径是正确的。如果文件路径不正确，SASS 就会报错。
例如，我们有以下的文件结构：
├── scss/ │ ├── main.scss │ └── _variables.scss
在 main.scss 中导入 _variables.scss：
@import 'variables';
如果我们在 main.scss 中使用了错误的文件路径，例如：
@import 'wrong-variables';
那么 SASS 就会报错，因为它找不到 wrong-variables.scss 文件。
因此，我们需要确保使用正确的相对路径：
@import '_variables';
2. 确保文件名以 _ 开头
在 SASS 中，文件名以 _ 开头的文件被称为 “局部文件”，它们通常包含了一些变量、mixin 或者函数等。这些文件不会被编译成单独的 CSS 文件，而是被其他 SASS 文件引用。
因此，如果我们要在 SASS 中导入一个局部文件，需要确保文件名以 _ 开头。例如：
@import '_variables';
如果我们不小心将文件名命名为 variables.scss，那么 SASS 就会报错，因为它无法找到这个文件。
3. 确保文件在正确的位置
在 SASS 中，文件的位置也很重要。通常情况下，我们将 SASS 文件放在 scss 目录下，将编译后的 CSS 文件放在 css 目录下。
如果我们在 SASS 中使用了错误的文件路径，例如：
@import '../css/main';
那么 SASS 就会报错，因为它无法找到 main.scss 文件。因此，我们需要确保文件在正确的位置。
例如，我们的文件结构如下：
├── scss/
│ ├── main.scss
│ └── _variables.scss
└── css/
└── main.css在 main.scss 中导入 main.css：
@import '../css/main';
这样 SASS 就可以找到 main.css 文件了。
4. 使用绝对路径
在某些情况下，使用绝对路径可能更加可靠。我们可以使用 ~ 来表示项目根目录，然后使用绝对路径导入文件。
例如，我们的文件结构如下：
├── scss/
│ ├── main.scss
│ └── _variables.scss
└── css/
└── main.css我们可以使用以下的方式导入文件：
@import '~/scss/variables';
这样 SASS 就可以找到 variables.scss 文件了。
5. 使用 includePaths
如果我们在项目中使用了大量的 SASS 文件，并且它们之间存在复杂的依赖关系，那么手动管理文件路径可能会变得很困难。这时，我们可以使用 includePaths 来简化这个过程。
在 node-sass 中，我们可以通过以下的方式设置 includePaths：
const sass = require('node-sass');
sass.render({
file: 'path/to/main.scss',
includePaths: ['path/to/scss', 'path/to/other/scss']
}, function(err, result) {
// ...
});这样，我们就可以在 SASS 中使用以下的方式导入文件：
@import 'variables';
SASS 会在 includePaths 中查找文件，如果找到了就会导入。
总结
使用 SASS 可以使我们的 CSS 代码更加易读易维护，但是在使用 SASS 的过程中，我们经常会遇到 “File to import not found” 的错误。为了避免这种错误，我们需要确保文件路径正确、文件名以 _ 开头、文件在正确的位置以及使用绝对路径或 includePaths。
希望本文能够帮助你更好地使用 SASS，避免常见的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d5cc2aadd4f0e0ffd73950