@import 指令被 sass 忽略

Question

我正在尝试使用 sass 导入指令将一个文件包含到另一个文件中并编写

% cat plugged.scss 
#plugged {
  @import 'content.css';
}

我有简单的

% cat content.css 
body {
    background-color: yellow;
}

不幸的是，当我这样做时

% sass plugged.scss plugged.css

我明白了

% cat plugged.css              
#plugged {
  @import 'content.css';
}

即输入只是复制到输出而不进行任何处理。它不应该将一个文件合并到另一个文件吗？

如何解决 and/or 我缺少什么？

版本是

% sass --version
1.43.4

我删除了文件扩展名，但它做了一些奇怪的事情：

dims@raikron410 sass01 % ls content                            
content
dims@raikron410 sass01 % head -c 800 content                  
/*!
 * Bootstrap v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji",%                                  
dims@raikron410 sass01 % cat plugged4.scss
#plu {
    @import 'content';
  }
  %                                                                                                                                                         
dims@raikron410 sass01 % cat plugged4.scss
#plu {
    @import 'content';
}%                                                                                                                                                          
dims@raikron410 sass01 % sass plugged4.scss plugged4.css
dims@raikron410 sass01 % cat plugged4.css
#plu body {
  background-color: yellow;
}

/*# sourceMappingURL=plugged4.css.map */

这是怎么回事？ yellow去了哪里？？？？

Answer 1

我认为这是因为你是importing a .css-file into Sass。

导入这些文件时删除 css.- 扩展名：

% cat plugged.scss 
#plugged {
  @import 'content';
}

Answer 2

好问题！

要将常规 CSS 文件导入 Sass，您需要删除 .css 文件扩展名。

@import 'content'

Sass 官方文档在“导入 CSS”下通过示例说明了这一点：Sass Documentation

这是来自 Sass 文档的屏幕截图：

@import 指令被 sass 忽略

@import directive is ignored by sass

css

macos

import

sass