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

在遇到同样的问题后，我对这里的所有答案以及对 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，它应该可以正常工作（结帐 this）。我已经在 node-sass 上使用 @import 进行了测试，它工作正常。不幸的是，这在某些 ruby 实例上有效并且不起作用。

---

这是从版本 3.2 开始实施和合并的（pull #754 于 2015 年 1 月 2 日合并为 libsass，问题最初在此处定义：sass#193 #556、{6 }#318）。

长话短说，接下来的语法：

导入（包含）原始 CSS 文件，语法是**没有 `.css`** 扩展名（导致实际读取部分 `s[ac]ss|css` 并将其包含在内联到 SCSS/ SASS): @import "路径/到/文件";以传统方式导入 CSS 文件 语法以传统方式进行，**带有 `.css` 扩展名** 在末尾（结果为 `@import url("path/to/file.css");` in你编译的 CSS): @import "path/to/file.css";

而且非常好：这种语法优雅简洁，而且向后兼容！它与 libsass 和 node-sass 配合得很好。

__

为避免在评论中进一步猜测，请明确写下：基于 Ruby 的 Sass 在经过 7 年的讨论后仍然未实现此功能。在撰写此答案时，已承诺在 4.0 中将有一种简单的方法来完成此操作，可能需要 @use 的帮助。似乎很快就会有一个实现，新的 “计划” “Proposal Accepted” 标记已分配给 issue #556 和新的 @use 功能。

UPD： 2020 年 10 月 26 日lib-sass was deprecated，因此 issue #556 立即关闭。

__

答案可能会更新，一旦发生变化。

---

截至撰写本文时，这似乎尚未实现：

https://github.com/sass/sass/issues/193

对于 libsass（C/C++ 实现），导入对 *.css 的工作方式与对 *.scss 文件的工作方式相同 - 只需省略扩展名：

@import "path/to/file";

这将导入 path/to/file.css。

有关详细信息，请参阅 this answer。

请参阅 this answer 了解 Ruby 实现（sass gem）

---

您必须在要包含的 css 文件前添加下划线，并将其扩展名切换为 scss（例如：_yourfile.scss）。然后你只需要这样称呼它：

@import "yourfile";

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

---

大家好消息，Chris Eppstein 创建了一个具有内联 css 导入功能的指南针插件：

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

现在，导入 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（用于 Node.js）一起使用的 node-sass-import-once 可以内联导入 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/_partial.scss：

@import partials/_partial.scss 成功

@import * partials/partial.scss 失败

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

---

如果我是正确的 css 与 scss 兼容，那么您可以将 css 的扩展名更改为 scss，它应该可以继续工作。更改扩展名后，您可以将其导入，它将包含在文件中。

如果您不这样做，那么 sass 将使用您不想要的 css @import。

---

我想出了一种优雅的、类似 Rails 的方式来做到这一点。首先，将您的 .scss 文件重命名为 .scss.erb，然后使用如下语法（highlight_js-rails4 gem CSS asset 的示例）：

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

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

只要您以一种或另一种方式明确使用完整路径，在 SCSS 中执行 @import 就可以很好地处理 CSS 文件。在开发模式下，rails s 提供资源而不编译它们，因此这样的路径有效...

@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.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 文件导入 Sass：

官方 Sass 文档：Import CSS into Sass

https://i.stack.imgur.com/F6yyw.jpg

---

简单的解决方法：

所有或几乎所有 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 是否包含任何 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

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

---

简单的。

@import "路径/到/file.css";

---