如何将scss导入html,在SCSS文件中导入常规CSS文件？

看起来这是未实现的，截至本文写作时：

这是现在执行：

CSS @import指令

Sass现在更加明智地将@import指令编译为plain> CSS。 以下任何一种情况都会导致文字CSS @import：>

导入一个.css扩展名的路径(例如@import“foo.css”)。

导入一个媒体类型的路径(例如@import“foo”screen;)。

导入一个HTTP路径(例如@import“ http://foo.com/style.css ”)。

导入任何网址(例如@import url(foo))。

前两个条件总是有效的，后两个条件是新的。

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

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

语法与现在相同 – @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实例上工作。

你必须在下拉列表中加入一个下划线，并将其扩展名切换到scss(例如： _yourfile.scss )。 那么你只需要这样调用它：

@import "yourfile";

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

这是从版本3.2开始实施和合并( 拉＃754于2015年1月2日合并为libsass ，原始问题在这里定义： sass ＃193 ， libsass ＃318 )。

长话短说，下面的语法：

导入(包含)原始CSS文件

语法的末尾没有.css扩展名(导致实际读取部分内容，并且包含内联到SCSS / SASS)：

@import "path/to/file";

以传统方式导入CSS文件

语法以传统的方式进行，最后以.css扩展名 (结果为@import url("path/to/file.css");在您编译的CSS中)：

@import "path/to/file.css";

而且这是该死的好：这个语法是优雅和简洁，加上向后兼容！ 它与libsass和node-sass非常libsass 。

__

为了避免在评论中进一步推测，明确地写出这个问题：基于Ruby的Sass在经过5年讨论＃193问题之后仍然没有实现这个特性。 在写这个答案的时候，答应在4.0中有一个简单的方法来完成这个任务。

答案可能会更新，只要有所改变 。

每个人都有好消息，Chris Eppstein创建了一个内嵌css导入功能的指南针插件：

现在，导入一个CSS文件就像：

@import "CSS:library/some_css_file"

如果你有一个你不想修改的.css文件，那么既不要修改它的扩展名为.scss ( 例如，这个文件来自你没有维护的分支项目 )，你总是可以创建一个符号链接，然后将其导入到你的.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

您可以使用第三方importer来自定义@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配置：

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而没有明确的前导下划线。 例如文件partials/_partial.scss ：

@import partials/_partial.scss成功

@import * partials/partial.scss失败

通常，请注意，自定义导入器可以更改任何导入语义。 在开始使用之前阅读文档。

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

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

这是使用import语句在新版本的sass中实现的：

@import '/public/css/bootstrap.css';

我想出了一个优雅的Rails式的方式来做到这一点。 首先，将.scss.erb文件重命名为.scss.erb ，然后使用如下所示的语法( highlight_js-rails4 gem CSS资源示例)：

@import "";

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

只要您明确地使用完整路径，就可以在SCSS中执行@import工作。 在开发模式下， rails s在不编译资源的情况下提供资源，所以像这样的路径工作…

@import "highlight_js/github.css";

…因为托管路径实际上是/assets/highlight_js/github.css 。 如果你右键点击页面和“查看源代码”，然后点击上面的@import样式表的@import ，你会在那里看到一行：

@import url(highlight_js/github.css);

SCSS引擎将"highlight_js/github.css"为url(highlight_js/github.css) 。 这将会游泳直到你决定尝试在资源预编译的生产环境中运行它有一个哈希注入文件名。 SCSS文件仍将解析为静态/assets/highlight_js/github.css ，该文件没有进行预编译，也不存在于生产环境中。

该解决方案如何工作：

首先，通过将.scss.erb文件移动到.scss.erb ，我们有效地将SCSS转换为Rails的模板。 现在，无论何时我们使用模板标签，Rails模板处理器都会用代码的输出(就像其他模板一样)替换这些片段。

在.scss.erb文件中asset_path("highlight_js/github")做两件事情：

触发rake assets:precompile任务以预编译相应的CSS文件。

无论Rails环境如何，都会生成适当反映资产的URL。

这也意味着SCSS引擎甚至不解析CSS文件; 它只是托管一个链接！ 所以没有好笑的猴子补丁或粗糙的解决办法。 我们正在按照预期通过SCSS提供一个CSS资源，并使用一个指向Rails的CSS资源的URL。 甜！

简单的解决方法：

所有，或几乎所有的CSS文件也可以被解释为，如果它是scss。 它也可以导入它们在一个块内。 将css重命名为scss，然后将其导入。

在我的实际配置中，我执行以下操作：

首先，我将.css文件复制到临时文件中，这次是.scss扩展名。 咕噜示例配置：

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，因为它包含任何scss可解释的神器(这是不可能的，但如果发生，结果将很难调试和危险)。

现在可以使用：

@import 'CSS:directory/filename.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

感谢Chriss Epstein： https ： //github.com/sass/sass/issues/193

简单。

@import“path / to / file.css”;