Sass "Ошибка: не удается найти таблицу стилей для импорта."

Question

Я столкнулся с проблемой, которая кажется похожей на проблему, описанную в https://github.com/sass/dart-sass/issues/284,, но не кажется мне «исправленной». Я пытаюсь следовать рабочему процессу, описанному в https://getbootstrap.com/docs/4.1/getting-started/theming/, для импорта исходного кода SCSS Bootstrap.

Вот моя (упрощенная) структура каталогов:

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

Я установил Bootstrap, используя npm install bootstrap; my 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

Я наконец-то решил эту проблему, используя 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...