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

14 回答

• -3

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

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

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

  @import "path/to/file";
  

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

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

  有关Ruby实现，请参阅this answer（sass gem）

  回复于 2024-05-12T13:03:33+08:00
• 3

  如果你有一个你不想修改的 .css 文件，也没有将它的扩展名改为 .scss （例如这个文件来自你没有维护的分叉项目），你总是 create a symlink and then import it 进入你的 .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

  回复于 2024-05-12T13:03:33+08:00
• 1

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

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

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

  如果您使用某些"fancy"新模块捆绑包（如webpack），则可能需要在路径的开头使用 ~ . 所以，如果你想导入以下路径 node_modules/bootstrap/src/core.scss ，你会写类似的东西
  @import "~bootstrap/src/core" .

  注意：
  看来这对每个人都不起作用 . 如果你的翻译是基于 libsass 它 should 工作正常（结帐this） . 我在node-sass上使用 @import 进行了测试，并且它在某些ruby实例上工作 .

  回复于 2024-05-12T13:03:33+08:00
• -1

  我可以确认这是有效的：

  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

  回复于 2024-05-12T13:03:33+08:00
• 4

  现在可以使用：

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

  回复于 2024-05-12T13:03:33+08:00
• -4

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

  @import "yourfile";
  

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

  回复于 2024-05-12T13:03:33+08:00
• 339

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

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

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

  @import "CSS:library/some_css_file"
  

  回复于 2024-05-12T13:03:33+08:00
• 213

  您可以使用第三方 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 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/_partial.scss ：

  • @import partials/_partial.scss 成功

  • @import * partials/partial.scss 失败

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

  回复于 2024-05-12T13:03:33+08:00
• 252

  在sass 3.5.5上这是有效的

  @import url（'yourStyle.css'）

  回复于 2024-05-12T13:03:33+08:00
• 128

  我想出了一种优雅，像Rails一样的方法 . 首先，将 .scss 文件重命名为 .scss.erb ，然后使用这样的语法（例如highlight_js-rails4 gem CSS asset）：

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

  Why you can't host the file directly via SCSS ：

  只要您以某种方式明确使用完整路径，在SCSS中执行 @import 就可以正常使用CSS文件 . 在开发模式下， rails s 为资产提供服务而不编译它们，因此这样的路径可以工作......

  @import "highlight_js/github.css";
  

  ...因为托管路径实际上是 /assets/highlight_js/github.css . 如果右键单击页面"view source"，然后单击带有上述 @import 的样式表链接，您会在其中看到如下所示的行：

  @import url(highlight_js/github.css);
  

  SCSS引擎将 "highlight_js/github.css" 转换为 url(highlight_js/github.css) . 这将在游戏中工作，直到您决定尝试在 生产环境 中运行它，其中资产被预编译具有注入文件名的哈希 . SCSS文件仍将解析为未预编译且在 生产环境 中不存在的静态 /assets/highlight_js/github.css .

  How this solution works:

  首先，通过将 .scss 文件移动到 .scss.erb ，我们已经有效地将SCSS转换为Rails的模板 . 现在，每当我们使用 <%= ... %> 模板标签时，Rails模板处理器将替换这些片段代码的输出（就像任何其他模板一样） .

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

  • 触发 rake assets:precompile 任务以预编译适当的CSS文件 .

  • 生成适当反映资产的URL，而不管Rails环境如何 .

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

  回复于 2024-05-12T13:03:33+08:00
• -12

  简单的解决方法：

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

  回复于 2024-05-12T13:03:33+08:00
• -2

  简单 .

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

  回复于 2024-05-12T13:03:33+08:00
• 17

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

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

  回复于 2024-05-12T13:03:33+08:00
• 33

  这是从版本 3.2 开始实现并合并的（pull #754在 2 Jan 2015 上为 libsass 合并，原始问题在这里定义： sass #193 #556， libsass #318） .

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

  导入（包含）原始CSS文件

  语法最后为 without .css 扩展（导致实际读取部分 s[ac]ss|css 并包含内联到SCSS / SASS）：

  @import "path/to/file";

  以传统方式导入CSS文件

  语法以传统方式进行，最后是 with .css extension （结果为编译后的CSS中的 @import url("path/to/file.css"); ）：

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

  这太棒了：这种语法优雅而简洁，加上后向兼容！它与 libsass 和 node-sass 完美配合 .

  __

  为避免在评论中进一步推测，经过7年的讨论，明确地写出这个：基于 Ruby 的 Sass 仍然具有此功能 unimplemented . 在写这个答案的时候，它承诺在4.0中有一个简单的方法可以实现这一点，可能是在@use的帮助下 . 似乎很快就会有一个实现，为issue #556和新的 @use 功能分配了新的“计划”"Proposal Accepted"标签 .

  一旦有变化，答案可能会更新 .

  回复于 2024-05-12T13:03:33+08:00