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;安装了 Bootstrap mypackage.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与 in 位于同一目录bootstrap.scss中node_modules/bootstrap/scss，但该sass命令似乎希望它位于我的自定义scss目录中。我怎样才能解决这个问题？

Answer 1

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

@import 'style/components/palette'; 

到

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

Answer 2

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

Answer 3

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

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

在你的 scss 文件中

Answer 4

对于那些使用sassNPM 包并拥有自己的 NodeJS 构建脚本的人，请确保在或方法中提供loadPaths选项参数。例如：compilecompileAsync

import sass from 'sass';
// const sass = require('sass');

const build = async () => {
    await sass.compileAsync('./src/index.scss',
        {
            sourceMap: true,
            style: 'expanded',
            loadPaths: ['./src']
        }
    );
};

这./src是您的主 scss 文件所在的位置，相对于您的项目目录。如果索引文件位于项目根目录中，您可能不需要此配置，但大多数人可能不会将其 scss 文件放在那里。

Answer 5

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

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 sass\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.scss\n\n

\n

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

\n

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

\n

Answer 6

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

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

Answer 8

我通过使用额外的正斜杠来解决它 @import "//abstracts/variable";

Answer 9

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