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

简单。

@ import“路径/ / file.css”;

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

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

你必须在要包含的css文件前加上一个下划线，并将其扩展名切换为scss(例如:_yourfile.scss)。那么你只需要这样称呼它:

@import "yourfile";

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

https://github.com/sass/sass/issues/193 < /罢工> < / p >

对于libsass (C/ c++实现)，导入对*.css文件的工作方式与对*.scss文件的工作方式相同-只需省略扩展名:

@import "path/to/file";

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

更多细节请参见这个答案。

参见这个答案 Ruby实现(sass gem)

好消息，Chris Eppstein创建了一个带有内联css导入功能的compass插件:

https://github.com/chriseppstein/sass-css-importer < a href = " https://github.com/chriseppstein/sass-css-importer " > < / >

现在，导入CSS文件就像这样简单:

@import "CSS:library/some_css_file"

现在可以使用:

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

如果您有一个不希望修改的.css文件，也不要将其扩展名更改为.scss (例如，这个文件来自一个你不维护的分叉项目)，您始终可以将创建一个符号链接，然后导入转换为.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

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

我想指出的是，截至2014年12月，这个问题已经解决。现在可以将css文件直接导入到sass文件中。下面的公关在github解决了这个问题。

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

如果你正在使用一些“花哨的”新模块捆绑器，比如webpack，你可能需要在路径的开头使用~。所以，如果你想导入下面的路径node_modules/bootstrap/src/core.scss，你可以写一些类似于
@import "~bootstrap/src/core"。

我可以确认这是有效的:

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

归功于chris Epstein: # EYZ0 < / p >

您可以使用第三方的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:

• # EYZ0成功
• # EYZ0失败

一般来说，要注意自定义导入器可能会更改任何导入语义。在开始使用之前请阅读文档。

这是从版本3.2开始实现和合并的(把# 754合并在2015年1月2日上，用于libsass，问题最初定义在这里:sass# 193 # 556， libsass# 318)。

长话短说，下面的语法:

1. 导入(包括)原始css文件

   语法是**，结尾没有' .css ' **扩展名(导致实际读取部分' s[ac]ss|css '，并将其内联到SCSS/SASS):

   # EYZ0

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

   语法以传统的方式进行，**以' .css '扩展名**结尾(结果为' @import url("path/to/file.css"); '在您编译的CSS中):

   # EYZ0

它非常好:语法优雅简洁，而且向后兼容!它非常适合使用libsass和node-sass。

＿＿

为了避免评论中进一步的猜测，明确地写下:Ruby基于萨斯，经过7年的讨论，未实现的仍然有这个功能。在写这篇文章的时候，我们承诺在4.0中会有一个简单的方法来实现这一点，可能是借助@use的帮助。似乎很快就会实施，新的“planned" "提案已接受"标签被分配给问题# 556和新的@use特性。

2020年10月26日乌利希期刊指南: Lib-sass被弃用，因此问题# 556立即变成关闭。

＿＿

# EYZ0。

我想出了一种优雅的、类似rails的方法。首先，将.scss文件重命名为.scss.erb，然后使用如下语法(以highlight_js-rails4 gem CSS资产为例):

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

# EYZ0:

只要以某种方式显式地使用完整路径，在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模板处理器将用代码的输出替换这些代码段(就像任何其他模板一样)。

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

1. 触发rake assets:precompile任务预编译适当的CSS文件。
2. 生成一个适当反映资产的URL，而不考虑Rails环境。

这也意味着SCSS引擎甚至不会解析CSS文件;它只是托管了一个链接!所以没有矫揉造作的补丁或粗制滥造的变通办法。我们通过SCSS来提供CSS资产，并使用URL来表示CSS资产。甜蜜的!

简单的解决方案:

所有或几乎所有的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是否包含任何可解释性css构件(这是不可能的，但如果发生了，结果将很难调试和危险)。

使用实例导入CSS文件到Sass。

Sass官方文档:导入CSS到Sass

导入css文件到scss只需使用this: @ import“src / your_file_path"; 没有在结尾使用扩展名.css