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

#1 楼

@import "path/to/file";

#2 楼

#3 楼

#4 楼

@import "yourfile";

#5 楼

@import "CSS:library/some_css_file"

#6 楼

ln -s path/to/css/file.css path/to/sass/files/_file.scss

@import "path/to/sass/files/file";

#7 楼

var sass = require('node-sass');,
    importOnce = require('node-sass-import-once');

sass.render({
  file: "input.scss",
  importer: importOnce,
  importOnce: {
    css: true,
  }
});

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"
      }
    }
  });

#8 楼

#9 楼

 @import "<%= asset_path("highlight_js/github") %>";
  
 
为什么不能直接通过SCSS托管文件：
 
只要您以一种方式明确使用完整路径，在CSS中执行@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进行统计可做两件事：
 
 
触发rake assets:precompile任务以预编译适当的CSS文件。
生成一个可以正确反映资产的URL，而不管Rails环境如何。
 
这也意味着SCSS引擎甚至没有解析CSS文件。它只是托管指向它的链接！因此，没有胡闹的猴子补丁或全面的解决方法。我们正按预期通过SCSS提供CSS资产，并按Rails的意图使用指向该CSS资产的URL。太好了！

评论
在我看来，该解决方案似乎有点阴暗，听起来更像是骇客。但这是一项很好的调查工作！



 –侧面

 16年7月28日在12:11 

#10 楼

copy: {
    dev: {
        files: [
            {
                src: "node_modules/some_module/some_precompiled.css",
                dest: "target/resources/some_module_styles.scss"
            }
        ]
    }
}

my-selector {
  @import "target/resources/some_module_styles.scss";
  ...other rules...
}

#11 楼

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

#12 楼

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

#13 楼