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

无论如何，是否可以使用Sass的@import命令导入常规CSS文件？尽管我没有使用sass的所有SCSS语法，但我仍然喜欢它的合并/压缩功能，并且希望能够在不将我的所有文件重命名为* .scss的情况下使用它

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

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

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

@import "path/to/file";

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

有关更多详细信息，请参见此答案。

查看此答案以了解Ruby实现（无礼的宝石）

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

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

语法与now-相同@import "your/path/to/the/file"，文件名后没有扩展名。这将直接导入您的文件。如果在末尾追加*.css，它将转化为cssrule @import url(...)。

如果您正在使用某些“新奇的”新模块捆绑包，例如webpack，则可能需要~在路径的开头使用use 。因此，如果要导入以下路径node_modules/bootstrap/src/core.scss，则应编写类似的内容
@import "~bootstrap/src/core"。

注意：
看来这不适用于所有人。如果您的解释器基于libsass它，那么它应该可以正常工作（请检查此）。我已经测试过@import在node-sass上使用它，并且工作正常。不幸的是，这可行，在某些红宝石实例上不起作用。

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

@import "yourfile";

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

这是实现和版本合并开始3.2（拉＃754合并于2015年1月2日进行libsass，问题的渊源进行了定义如下：sass＃193 ＃556，libsass＃318）。

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

1. 导入（包括）原始CSS文件

   语法在末尾没有.css扩展名（导致部分的实际读取，s[ac]ss|css并将其内联到SCSS / SASS中）：

   @import "path/to/file";

2. 以传统方式导入CSS文件

   语法以传统方式进行，最后以.css扩展名（导致@import url("path/to/file.css");编译后的CSS）：

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

真是太好了：这种语法简洁明了，而且向后兼容！与libsass和一起使用效果很好node-sass。

__

为了避免在评论中进一步猜测，请明确地编写此代码：经过7年的讨论，基于Ruby的Sass仍未实现此功能。在编写此答案时，已承诺在4.0中将有一种简单的方法来完成此操作，可能需要借助@use。似乎很快就会实现，为问题＃556和新功能分配了新的“计划中” “建议接受”标签。@use

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

大家好消息，克里斯·埃普斯坦（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

将symlink文件导入目标.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托管文件：

@import只要您以一种或另一种方式明确使用完整路径，在CSS文件中执行SCSS即可正常工作。在开发模式下，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模板处理器都会将这些代码片段替换为代码输出（就像其他模板一样）。

asset_path("highlight_js/github")在.scss.erb文件中声明有两件事：

1. 触发rake assets:precompile任务以预编译适当的CSS文件。
2. 无论Rails环境如何，都会生成一个可以正确反映资产的URL。

这也意味着SCSS引擎甚至没有解析CSS文件。它只是托管指向它的链接！因此，没有胡闹的猴子补丁或全面的解决方法。我们正按预期通过SCSS提供CSS资产，并按Rails的意图使用指向该CSS资产的URL。甜！

简单的解决方法：

所有或几乎所有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”;