使用实例导入CSS文件到Sass。

Sass官方文档:将CSS导入Sass

使用实例导入CSS文件到Sass。

Sass官方文档:将CSS导入Sass

如果我是正确的，css与scss兼容，所以你可以将css的扩展名更改为scss，它应该继续工作。一旦你改变了扩展名，你可以导入它，它将包含在文件中。

如果你不这样做，sass将使用css @import，这是你不想要的。

我可以确认这是有效的:

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

在遇到同样的问题后，我对这里所有的答案和github中sass库的评论感到困惑。

我想指出的是，截至2014年12月，这个问题已经解决。现在可以直接导入css文件到sass文件中。下面的PR在github解决了这个问题。

语法和现在一样——@import "your/path/to/ The /file"，文件名后面没有扩展名。这将直接导入您的文件。如果在末尾添加*.css，它将转换为css规则@import url(…)。

如果你正在使用一些“花哨的”新模块捆绑器，比如webpack，你可能需要在路径的开头使用use ~。所以，如果你想导入以下路径node_modules/bootstrap/src/core。SCSS你可以写@import "~bootstrap/src/core"。

注意: 这似乎并不适用于所有人。如果你的解释器是基于libsass的，它应该可以正常工作(签出这个)。我已经在node-sass上使用@import进行了测试，它工作得很好。不幸的是，这是可行的，但在一些ruby实例上不起作用。

您可以使用第三方导入器来定制@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失败

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