Sass“错误：找不到要导入的样式表。”答案

【问题标题】：Sass "Error: Can't find stylesheet to import."Sass“错误：找不到要导入的样式表。”
【发布时间】：2018-12-10 03:25:02
【问题描述】：

我遇到了一个与https://github.com/sass/dart-sass/issues/284 中报告的问题相似的问题，但对我来说似乎没有“修复”。我正在尝试按照https://getbootstrap.com/docs/4.1/getting-started/theming/ 中描述的工作流程来导入 Bootstrap 的 SCSS 源代码。

这是我的（简化的）目录结构：

.
├── index.html
├── node_modules
│   ├── @mdi
│   └── bootstrap
├── package-lock.json
├── package.json
├── scss
│   └── peek-solutions2.scss
└── stylesheets
    └── peek-solutions.css

我已经使用 npm install bootstrap 安装了 Bootstrap；我的package.json 包含以下依赖项：

{
  "dependencies": {
    "@mdi/font": "^2.2.43",
    "bootstrap": "^4.1.1"
  }
}

在peek-solutions2.scss 中，我添加了以下行：

@import "../node_modules/bootstrap/scss/bootstrap";

我已尝试使用sass --watch 命令指定不同目录中的输入和输出文件（参见https://sass-lang.com/guide），但遇到了导入错误：

Kurts-MacBook-Pro:peek-solutions2 kurtpeek$ sass --watch scss/peek-solutions2.scss:stylesheets/peek-solutions2.css
Error: Can't find stylesheet to import.
@import "functions";
        ^^^^^^^^^^^
  ../node_modules/bootstrap/scss/bootstrap.scss 8:9  @import
  scss/peek-solutions2.scss 1:9                      root stylesheet

Sass is watching for changes. Press Ctrl-C to stop.

这似乎是一个路径问题； _functions.scss 与node_modules/bootstrap/scss 中的bootstrap.scss 位于同一目录中，但似乎sass 命令希望它位于我的自定义scss 目录中。我该如何解决这个问题？

【问题讨论】：

标签： css sass

【解决方案1】：

我终于通过使用 Grunt 而不是 sass 来编译和查看 SCSS 文件来解决这个问题。在运行npm install grunt --save-dev、npm install grunt-contrib-sass --save-dev和npm install grunt-contrib-watch --save-dev之后，我添加了以下Gruntfile.js：

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {                              // Task
      dist: {                            // Target
        files: {                         // Dictionary of files
          'stylesheets/main.css': 'scss/main.scss',       // 'destination': 'source'
        }
      }
    },
    watch: {
      scripts: {
        files: ['**/*.scss'],
        tasks: ['sass'],
      },
    },
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['sass']);

};

现在，如果我运行grunt watch，每当我保存scss/main.scss 时，它都会编译成stylesheets/main.css：

Kurts-MacBook-Pro:peek-solutions2 kurtpeek$ grunt watch
Running "watch" task
Waiting...
>> File "scss/main.scss" changed.
Running "sass:dist" (sass) task

Done.
Completed in 1.720s at Sun Jul 01 2018 14:41:11 GMT-0700 (PDT) - Waiting...

【讨论】：

【解决方案2】：

这发生在我身上，因为我在根项目文件夹以外的文件夹中运行 ng build --prod，并且所有其他 css 导入都会中断简单的解决方案是 cd 到根文件夹

【讨论】：

或ng serve 根以外的其他地方（就在src 之外）

【解决方案3】：

只删除开头的点，你必须写：

@import "node_modules/bootstrap/scss/bootstrap";

在你的 scss 文件中

【讨论】：

您好，@adaout，欢迎来到 Stack Overflow。鉴于 node_modules 文件夹位于父目录中，是否会删除前面的点 (../) 指示代码查看不存在的 scss/node_modules/bootstrap/scss/bootstrap 文件夹？

【解决方案4】：

我也遇到了这个错误，我只是使用相对路径解决了它，如下所示： @import '../../node_modules/bootstrap/scss/bootstrap';

我希望这对某人有帮助！

【讨论】：

这复制了一个多月前发布的答案，因此对网站没有任何价值。
另一个重复的答案是什么？我看到 adjaout 说要删除这些点，什么没有解决这个错误。问候。

【解决方案5】：

我通过将导入直接指向文件解决了这个问题，即：

@import 'style/components/palette';

到

@import 'style/components/_palette.scss';

【讨论】：

感谢分享。我在使用 NX 时遇到了这个问题。这个答案有效。但是为什么这能解决问题呢？

【解决方案6】：

我通过使用额外的正斜杠 @import "//abstracts/variable" 解决了这个问题；

【讨论】：

你知道它为什么有效吗？我找不到这个问题的答案。

【解决方案7】：

我安装了bootstrap旧版本，它没有在我的node模块下的bootstrap中添加scss文件夹，所以我通过命令npm uninstall bootstrap卸载了我的bootstrap，并通过npm i bootstrap重新安装了它。

【讨论】：

【解决方案8】：

您只需 cd 进入项目文件夹的根目录。两种情况：

如果您深入项目，则需要在命令行中运行cd ..，直到进入根目录。
如果您不在项目之外，则需要运行 cd [insert root folder here] 并再次运行您的构建。

【讨论】：

【解决方案9】：

例如，如果您的 index.scss 文件位于名为“sass”的目录中，例如

├── node_modules
├── sass
│   └── index.scss

那么你应该使用这个文件路径：

@import "../node_modules/bootstrap/scss/bootstrap";

【讨论】：