现在可以使用:

@import 'CSS:directory/filename.css';

您可以使用第三方导入器来定制@import语义。

node-sass-import-once，它与node-sass (Node.js)一起工作，可以内联导入CSS文件。

直接使用的例子:

var sass = require('node-sass');,
    importOnce = require('node-sass-import-once');

sass.render({
  file: "input.scss",
  importer: importOnce,
  importOnce: {
    css: true,
  }
});

使用示例grunt-sass config:

var importOnce = require("node-sass-import-once");
grunt.loadNpmTasks("grunt-sass");

grunt.initConfig({
  sass: {
    options: {
      sourceMap: true,
      importer: importOnce
    },
    dev: {
      files: {
        "dist/style.css": "scss/**/*.scss"
      }
    }
  });

注意，node-sass-import-once目前不能导入没有显式前导下划线的Sass部分。例如，使用文件partials/_partial.scss:

@ import泛音/ _partial。scss成功 @import * partials/partial。scss失败

一般来说，要注意自定义导入器可能更改任何导入语义。在开始使用之前请阅读文档。

你必须在要包含的css文件前加上一个下划线，并将其扩展名切换为scss(例如:_yourfile.scss)。那么你只需要这样称呼它:

@import "yourfile";

它将包含文件的内容，而不是使用CSS标准的@import指令。

我想出了一种优雅的、类似rails的方法。首先，将.scss文件重命名为.scss。然后使用这样的语法(例如highlight_js-rails4 gem CSS资产):

@import "<%= asset_path("highlight_js/github") %>";

为什么你不能通过SCSS直接托管文件:

只要以某种方式显式地使用完整路径，在SCSS中执行@import对于CSS文件就可以正常工作。在开发模式下，rails为资产服务而不编译它们，所以像这样的路径可以工作…

@import "highlight_js/github.css";

.．.因为托管路径就是/assets/highlight_js/github.css。如果你在页面上右键单击“查看源代码”，然后用上面的@import点击样式表的链接，你会看到一行看起来像这样:

@import url(highlight_js/github.css);

SCSS引擎将“highlight_js/github.css”转换为url(highlight_js/github.css)。这将很顺利，直到您决定尝试在预编译资产的生产环境中运行它，并在文件名中注入散列。SCSS文件仍然会解析为一个静态/assets/highlight_js/github.css，这个文件没有预编译，在生产环境中也不存在。

这个解决方案是如何工作的:

首先，通过移动.scss文件到.scss。当然，我们已经有效地把SCSS变成了Rails的模板。现在，每当我们使用<%=…%>模板标记时，Rails模板处理器将用代码的输出替换这些代码段(就像任何其他模板一样)。

在.scss中声明asset_path("highlight_js/github")。Erb文件做两件事:

触发rake assets:precompile任务来预编译适当的CSS文件。 生成一个适当反映资产的URL，而不考虑Rails环境。

这也意味着SCSS引擎甚至不会解析CSS文件;它只是托管了一个链接!所以没有矫揉造作的补丁或粗制滥造的变通办法。我们通过SCSS来提供CSS资产，并使用URL来表示CSS资产。甜蜜的!

简单的解决方案:

所有或几乎所有的css文件也可以被解释为scss。它还允许在块中导入它们。重命名css为scss，然后导入。

在我的实际配置中，我这样做:

首先，我将.css文件复制到一个临时文件中，这次扩展名为.scss。Grunt配置示例:

copy: {
    dev: {
        files: [
            {
                src: "node_modules/some_module/some_precompiled.css",
                dest: "target/resources/some_module_styles.scss"
            }
        ]
    }
}

然后你可以从你的父scss导入.scss文件(在我的例子中，它甚至被导入到一个块中):

my-selector {
  @import "target/resources/some_module_styles.scss";
  ...other rules...
}

注意:这可能是危险的，因为它将有效地导致css将被解析多次。检查您的原始css是否包含任何可解释性css构件(这是不可能的，但如果发生了，结果将很难调试和危险)。

我可以确认这是有效的:

class CSSImporter < Sass::Importers::Filesystem
  def extensions
    super.merge('css' => :scss)
  end
end

view_context = ActionView::Base.new
css = Sass::Engine.new(
  template,
  syntax:     :scss,
  cache:      false,
  load_paths: Rails.application.assets.paths,
  read_cache: false,
  filesystem_importer: CSSImporter # Relevant option,

  sprockets:  {
    context:     view_context,
    environment: Rails.application.assets
  }
).render

克里斯·爱泼斯坦: https://github.com/sass/sass/issues/193