Question

我遇到了一个问题，该问题似乎与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与bootstrap.scss中的node_modules/bootstrap/scss位于同一目录中，但是似乎sass命令期望它位于我的自定义scss目录中。我该如何解决？

Answer 1

只需删除开头的点，您必须输入：

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

在您的scss文件中

Answer 2

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

Answer 3

我终于通过使用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...

Answer 4

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

我希望这对某人有帮助！

Answer 5

我通过直接将导入指向文件来解决此问题，即：

@import 'style/components/sbg-palette';

到

@import 'style/components/_sbg-palette.scss';

Answer 6

我通过使用额外的正斜杠@import“ // abstracts / variable”解决了它；

Answer 7

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

Answer 8

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

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

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

8 个答案: