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

Question

无论如何使用Sass的@import命令导入常规CSS文件？虽然我没有使用sass的所有SCSS语法，但我仍然喜欢它的组合/压缩功能，并希望能够使用它而无需将我的所有文件重命名为* .scss

Answer 1

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

我只想指出，截至2014年12月，此问题已得到解决。现在可以将?- Xs = [A,B,C,D], count(Xs,Zss). Xs = [D,D,D,D], A=B, B=C , C=D , Zss = [ [D,4]] ; Xs = [C,C,C,D], A=B, B=C , dif(C,D), Zss = [ [C,3],[D,1]] ; Xs = [B,B,D,D], A=B, dif(B,C), C=D , Zss = [ [B,2], [D,2]] ; Xs = [B,B,C,D], A=B, dif(B,C), dif(C,D), Zss = [ [B,2],[C,1],[D,1]] ; Xs = [A,D,D,D], dif(A,B), B=C , C=D , Zss = [[A,1], [D,3]] ; Xs = [A,C,C,D], dif(A,B), B=C , dif(C,D), Zss = [[A,1], [C,2],[D,1]] ; Xs = [A,B,D,D], dif(A,B), dif(B,C), C=D , Zss = [[A,1],[B,1], [D,2]] ; Xs = [A,B,C,D], dif(A,B), dif(B,C), dif(C,D), Zss = [[A,1],[B,1],[C,1],[D,1]]. 文件直接导入到sass文件中。 github中的以下PR解决了这个问题。

语法与现在相同 - css，文件名后没有扩展名。这将直接导入您的文件。如果您在结尾添加@import "your/path/to/the/file"，则会转换为*.css规则css。

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

注意：
看起来这对每个人都不起作用。如果您的口译员基于@import "~bootstrap/src/core"，那么应该正常工作（结帐this）。我已经在node-sass上使用libsass进行了测试，它运行正常。不幸的是，这有效并且不适用于某些ruby实例。

Answer 2

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

@import "yourfile";

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

Answer 3

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

简而言之，下一步是语法：

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

   语法为，最后没有libsass 扩展名（结果为实际读取部分.css并将其包含在SCSS / SASS内联中：

   s[ac]ss|css

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

   语法采用传统方式，最后使用@import "path/to/file";扩展名 （在编译的CSS中.css的结果）：

   @import url("path/to/file.css");

这太棒了：这种语法优雅而简洁，加上后向兼容！它与@import "path/to/file.css";和libsass非常合作。

__

为了避免在评论中进一步推测，经过7年的讨论，明确地写出： Ruby 基于 Sass 仍然具有此功能未实现。在写这个答案的时候，它承诺在4.0中有一个简单的方法可以实现这一点，可能是在@use的帮助下。似乎很快就会实施，新的＆＃34;计划＆＃34; ＆＃34;建议接受＆＃34;标记已分配给issue #556和新的node-sass功能。

答案可能会在内容发生变化后立即更新。

Answer 4

<击> 在撰写本文时，看起来这是未实现的：

<击> 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）

Answer 5

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

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

现在，导入CSS文件非常简单：

@import "CSS:library/some_css_file"

Answer 6

如果您有一个不希望修改的.css文件，则不要将其扩展名更改为.scss（例如此文件来自您未维护的分叉项目< / em>），您始终创建符号链接，然后将其导入.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

Answer 7

您可以使用第三方importer来自定义@import语义。

与node-sass-import-once（对于Node.js）一起使用的

node-sass可以内联导入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。例如，使用文件partials/_partial.scss：

• @import partials/_partial.scss成功
• @import * partials/partial.scss失败

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

Answer 8

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

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

Answer 9

我想出了一种优雅的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模板处理器将使用代码的输出替换这些片段（就像任何其他模板一样）。

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

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

这也意味着SCSS引擎甚至不解析CSS文件;它只是托管它的链接！所以没有hokey monkey补丁或粗略的解决方法。我们按照预期通过SCSS提供CSS资产，并使用URL作为Rails预期的CSS资产。甜！

Answer 10

简单的解决方法：

所有或几乎所有的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可解释的工件（这是不可能的，但如果它发生，结果将很难调试和危险）。

Answer 11

现在是 2021 年，对于所有像我一样对这里的其他答案感到困惑的人，我强烈建议您阅读文档（以下链接）。我在这里附上一小部分：

<块引用>

为了实现这一点，并确保 SCSS 是 CSS 的超集 尽可能地，Sass 将使用以下代码编译任何 @imports 纯 CSS 导入的特征：

• 导入 URL 以 .css 结尾的位置。
• 导入 URL 的起始位置 http:// 或 https://。
• 导入将 URL 写成 url() 的位置。
• 具有媒体查询的导入。

@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

文档：

• https://sass-lang.com/documentation/at-rules/import#importing-css
• https://sass-lang.com/documentation/at-rules/import#plain-css-imports

Answer 12

现在可以使用：

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

Answer 13

在sass 3.5.5上，这是有效的

@import url（＆＃39; yourStyle.css＆＃39;）

Answer 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

Answer 15

简单。

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