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


当前回答

这是从3.2版本开始实现和合并的(2015年1月2日为libsass合并了#754,最初的问题定义在这里:sass#193 #556, libsass#318)。

长话短说,下面的语法:

导入(包括)原始css文件,语法是**,结尾没有' .css ' **扩展名(导致实际读取部分' s[ac]ss|css ',并将其内联到SCSS/SASS): @ import“路径/ /文件”; 以传统的方式导入CSS文件,语法按照传统的方式,**以' .css '扩展名**结尾(结果是' @import url("path/to/file.css"); '在你编译的CSS中): @ import“路径/ / file.css”;

它非常好:语法优雅简洁,而且向后兼容!它与libsass和node-sass一起出色地工作。

__

为了避免在评论中进一步猜测,明确地写下:基于Ruby的Sass在经过7年的讨论后仍然没有实现这个特性。在写这篇文章的时候,我们承诺在4.0中会有一个简单的方法来实现这一点,可能是@use的帮助。似乎很快就会有一个实现,新的“计划中的”“提案已接受”标签被分配给#556问题和新的@use特性。

UPD:在2020年10月26日,lib-sass被弃用,因此第556期立即关闭。

__

答案可能会更新,只要有一些变化。

其他回答

在遇到同样的问题后,我对这里所有的答案和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实例上不起作用。

我可以确认这是有效的:

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

简单。

@import “路径/到/文件.css”;

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

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

现在可以使用:

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