css文件如何设置scss,在SCSS文件中导入常规CSS文件？

最新推荐文章于 2025-07-20 11:07:26 发布

无畏上将张灵甫

最新推荐文章于 2025-07-20 11:07:26 发布

阅读量3.6k

点赞数

文章标签： css文件如何设置scss

在SCSS中导入CSS文件，可以省略.css扩展名，如@import "path/to/file"。对于libsass，这将导入path/to/file.css。若使用Ruby实现，可以创建符号链接并导入。在某些情况下，可能需要使用CSS importer插件或第三方工具来实现导入。自Sass 3.2起，可以直接导入.css文件，无需扩展名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

回答(14)

3 years ago

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

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)

3 years ago

如果你有一个你不想修改的 .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

3 years ago

在遇到同样的问题之后，我对这里的所有答案以及对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实例上工作 .

3 years ago

我可以确认这是有效的：

class CSSImporter < Sass::Importers::Filesystem

def extensions

super.merge('css' => :scss)

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

3 years ago

现在可以使用：

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

3 years ago

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

@import "yourfile";

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

3 years ago

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

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

@import "CSS:library/some_css_file"

3 years ago

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

直接使用示例：

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"

}

});

请注意，如果没有明确的前导下划线，node-sass-import-once当前无法导入Sass部分 . 例如，使用文件 partials/_partial.scss ：

@import partials/_partial.scss 成功

@import * partials/partial.scss 失败

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

3 years ago

在sass 3.5.5上这是有效的

@import url('yourStyle.css')

3 years ago

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

@import "";

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资产 . 甜！

3 years ago

简单的解决方法：

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

3 years ago

简单 .

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

3 years ago

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

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

3 years ago

这是从版本 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"标签 .

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