在SCSS文件中导入常规CSS文件?

是否有任何方法可以用Sass的@import命令导入一个常规的CSS文件?虽然我没有使用sass的所有SCSS语法，但我仍然喜欢它的组合/压缩功能，并且希望能够使用它，而不必将我的所有文件重命名为*.scss

当前回答

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

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

2016-02-05 14:37:06

其他回答

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

@import "yourfile";

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

2012-01-10 12:06:14

我可以确认这是有效的:

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

2015-09-29 04:12:24

如果你有一个你不想修改的。css文件，也不要把它的扩展名改成。scss(例如，这个文件来自一个你不维护的fork项目)，你可以创建一个符号链接，然后把它导入到你的。scss中。

创建一个符号链接:

ln -s path/to/css/file.css path/to/sass/files/_file.scss

将符号链接文件导入目标.scss:

@import "path/to/sass/files/file";

您的目标输出. CSS文件将保存导入的符号链接.scss文件的内容，而不是CSS导入规则(由评论投票最高的@yaz提到)。并且您没有具有不同扩展名的重复文件，这意味着在初始.css文件中所做的任何更新都会立即导入到目标输出中。

符号链接(也称为符号链接或软链接)是一种特殊类型的文件它包含以绝对格式对另一个文件的引用或者相对路径，这会影响路径名解析。 ——http://en.wikipedia.org/wiki/Symbolic_link

2014-11-17 20:01:37

好消息，Chris Eppstein创建了一个带有内联css导入功能的compass插件:

https://github.com/chriseppstein/sass-css-importer

现在，导入CSS文件就像这样简单:

@import "CSS:library/some_css_file"

2013-07-03 08:48:39