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

本文翻译自：Import regular CSS file in SCSS file?

Is there anyway to import a regular CSS file with Sass's @import command? 无论如何，是否可以使用Sass的@import命令导入常规CSS文件？ While I'm not using all of the SCSS syntax from sass, I do still enjoy it's combining/compressing features, and would like to be able to use it without renaming all of my files to *.scss 尽管我没有使用sass的所有SCSS语法，但我仍然喜欢它的合并/压缩功能，并且希望能够在不将我的所有文件重命名为* .scss的情况下使用它

#1楼

参考：https://stackoom.com/question/Tq3O/在SCSS文件中导入常规CSS文件

#2楼

Good news everyone, Chris Eppstein created a compass plugin with inline css import functionality: 大家好消息，克里斯·埃普斯坦（Chris Eppstein）创建了一个具有嵌入式CSS导入功能的指南针插件：

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

Now, importing a CSS file is as easy as: 现在，导入CSS文件非常简单：

@import "CSS:library/some_css_file"

#3楼

现在可以使用：

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

#4楼

If you have a .css file which you don't wish to modify, neither change its extension to .scss ( eg this file is from a forked project you don't maintain ), you can always create a symlink and then import it into your .scss . 如果您有不想修改的.css文件，也没有将其扩展名更改为.scss （ 例如，该文件来自您不维护的分支项目 ），则始终可以创建符号链接，然后将其导入您的.scss 。

Creates a symlink: 创建一个符号链接：

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

Imports symlink file into a target .scss : 将symlink文件导入到目标.scss ：

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

Your target output .css file is going to hold contents from imported symlink .scss file, not a CSS import rule ( mentioned by @yaz with highest comment votes ). 您的目标输出.css文件将保存导入的symlink .scss文件中的内容，而不是CSS导入规则（ @yaz以最高的评论票数提及 ）。 And you don't have duplicated files with different extensions, what means any update made inside initial .css file immediately gets imported into your target output. 而且您没有具有不同扩展名的重复文件，这意味着在初始.css文件中进行的任何更新都会立即导入到目标输出中。

Symbolic link (also symlink or soft link) is a special type of file that contains a reference to another file in the form of an absolute or relative path and that affects pathname resolution. 符号链接（也称为符号链接或软链接）是文件的一种特殊类型，它以绝对或相对路径的形式包含对另一个文件的引用，并且会影响路径名的解析。
– http://en.wikipedia.org/wiki/Symbolic_link – http://en.wikipedia.org/wiki/Symbolic_link

#5楼

After having the same issue, I got confused with all the answers here and the comments over the repository of sass in github. 在遇到相同的问题之后，我对这里的所有答案以及对github中sass存储库的评论感到困惑。

I just want to point out that as December 2014, this issue has been resolved. 我只想指出，截至2014年12月，此问题已解决。 It is now possible to import css files directly into your sass file. 现在可以将css文件直接导入到您的sass文件中。 The following PR in github solves the issue. github中的以下PR解决了该问题。

The syntax is the same as now - @import "your/path/to/the/file" , without an extension after the file name. 语法与现在相同-@ @import "your/path/to/the/file" ，文件名后没有扩展名。 This will import your file directly. 这将直接导入您的文件。 If you append *.css at the end, it will translate into the css rule @import url(...) . 如果在末尾附加*.css ，它将转换为css规则@import url(...) 。

In case you are using some of the "fancy" new module bundlers such as webpack , you will probably need to use use ~ in the beginning of the path. 如果你正在使用的一些“花哨”的新模块捆扎机如的WebPack ，你可能需要使用用途~在路径的开始。 So, if you want to import the following path node_modules/bootstrap/src/core.scss you would write something like 因此，如果要导入以下路径node_modules/bootstrap/src/core.scss ，则应编写如下内容
@import "~bootstrap/src/core" . @import "~bootstrap/src/core" 。

NOTE: 注意：
It appears this isn't working for everybody. 看来这并不适合所有人。 If your interpreter is based on libsass it should be working fine (checkout this ). 如果您的解释器是基于libsass那么它应该可以正常工作（请libsass 此内容）。 I've tested using @import on node-sass and it's working fine. 我已经在node-sass上使用@import进行了测试，并且工作正常。 Unfortunately this works and doesn't work on some ruby instances. 不幸的是，这可行，在某些红宝石实例上不起作用。

#6楼

I can confirm this works: 我可以确认这项工作：

class CSSImporter < Sass::Importers::Filesystemdef extensionssuper.merge('css' => :scss)end
endview_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

Credit to Chriss Epstein: https://github.com/sass/sass/issues/193 归功于克里斯·爱泼斯坦： https : //github.com/sass/sass/issues/193

在SCSS文件中导入常规CSS文件？相关推荐

css文件如何设置scss,在SCSS文件中导入常规CSS文件？
回答(14) 3 years ago 截至撰写本文时,看起来这是未实现的: https://github.com/sass/sass/issues/193 对于libsass(C / C实现),导入对 ...
Struts2中导入外部xml文件出现Included file cannot be found错误！
Struts.xml 文件中导入外部xml文件,需要在Struts.xml文件中加入include元素. ch3.xml文件位于ch3目录中.ch3.xml是一个标准的Struts2配置文件路径千万 ...
YUI Compressor插件压缩后war中的js/css文件未压缩的解决方法（被maven打包顶替了）
YUI Compressor Maven插件可以压缩/合并js或css文件,经常用在Maven项目中,但最近发现在wabapp中执行了 mvn install 命令进行发布之后,终端中显示插件已经执行 ...
Django中如何配置CSS文件
Django中如何配置css文件我的编辑器是pycharm,Django版本是2.1.0 1.在项目中manage.py同级目录下新建static文件夹,在static文件夹下新建css文件夹,在c ...
【如何将.vue文件中的所有css代码放入一个.css文件中】
javascript – 如何将.vue文件中的所有css代码放入一个.css文件中?
java eclipse导入工程文件_如何在Eclipse软件中导入Java工程文件
有些在学习Java编程的用户虽然会创建工程,但是对于怎么导入工程文件却不清楚,下面这篇教程我们就来为大家介绍一下,在Eclipse软件中导入Java工程文件的方法,有兴趣的朋友就来了解一下吧. 解决方 ...
从csv文件中导入数据到MySQL数据库
从csv文件中导入数据到MySQL数据库转: 一.Workbench客户端导入(8.0.11基本导不全且速度奇慢) 1.点击如下图标创建数据库(非必要) 2.在表类上右键导入二.SQL语句导入(可 ...
SQL导入文本错误：大容量插入: 在数据文件中遇到意外的文件结尾 (EOF)。
服务器: 消息 4832,级别 16,状态 1,行 1 大容量插入: 在数据文件中遇到意外的文件结尾 (EOF). 服务器: 消息 7399,级别 16,状态 1,行 1 OLE DB 提供程序 'S ...
关于在ICEM中导入CAD几何模型文件的问题
关于在ICEM中导入CAD几何模型文件的问题本例中所用到的bates-71b喷管模型已经上传到资源用传统方法导入几何模型(import gem)会出现很多问题,大多时候是warnning还是可以正 ...

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

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

在SCSS文件中导入常规CSS文件？相关推荐

最新文章

热门文章