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

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 安装了引导程序；我的 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 is in the same directory as bootstrap.scss in node_modules/bootstrap/scss , but it seems like the sass command is expecting it to be in my custom scss 目录。我怎样才能解决这个问题？

原文由 Kurt Peek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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...

原文由 Kurt Peek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

在你的 scss 文件中

原文由 adjaout 发布，翻译遵循 CC BY-SA 4.0 许可协议