css文件如何设置scss,在SCSS文件中导入常规CSS文件?
回答(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
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"标签 .
一旦有变化,答案可能会更新 .
css文件如何设置scss,在SCSS文件中导入常规CSS文件?相关推荐
- 在SCSS文件中导入常规CSS文件?
本文翻译自:Import regular CSS file in SCSS file? Is there anyway to import a regular CSS file with Sass's ...
- 设置在VS2005的IDE中迅速打开xaml文件
设置在VS2005的IDE中迅速打开xaml文件 本人使用普通台式计算机做WPF开发,每次打开xaml的时候,都需要等半天,那叫一个慢呀,实在受不了.即使是一个新建的xaml文件,打开都慢.怎样解决V ...
- Struts2中导入外部xml文件出现Included file cannot be found错误!
Struts.xml 文件中导入外部xml文件,需要在Struts.xml文件中加入include元素. ch3.xml文件位于ch3目录中.ch3.xml是一个标准的Struts2配置文件 路径千万 ...
- java eclipse导入工程文件_如何在Eclipse软件中导入Java工程文件
有些在学习Java编程的用户虽然会创建工程,但是对于怎么导入工程文件却不清楚,下面这篇教程我们就来为大家介绍一下,在Eclipse软件中导入Java工程文件的方法,有兴趣的朋友就来了解一下吧. 解决方 ...
- 关于在ICEM中导入CAD几何模型文件的问题
关于在ICEM中导入CAD几何模型文件的问题 本例中所用到的bates-71b喷管模型已经上传到资源 用传统方法导入几何模型(import gem)会出现很多问题,大多时候是warnning还是可以正 ...
- 关于在Pycharm中导入自定义第三方文件后报错:ModuleNotFoundError: No module named
ModuleNotFoundError: No module named- 关于在Pycharm中导入自定义第三方文件后报错:ModuleNotFoundError: No module named ...
- 转储sql文件_在Linux上SQL Server中更改SQL转储文件位置
转储sql文件 In this article, we will talk about SQL Dump files and the process to change the dump direct ...
- QT笔记之VS2010 Qt中导入qrc资源文件
转载1:http://qimo601.iteye.com/blog/1404693 转载2:http://blog.sina.com.cn/s/blog_92cde3060101lobm.html 转 ...
- linux .so文件能解压吗,linux系统中rar解压文件安装和使用详解
linux平台默认是不支持RAR文件的解压,需要安装linux版本的RAR压缩软件. centos >>> cd /usr/local >>> wget http: ...
最新文章
- ​中国开启开源新纪元
- Python中必知的知识点:文本转义及编码的常用方法
- VTK:可视化之CameraActor
- linux ed 命令的用法
- [蓝桥杯][算法提高VIP]线段和点(排序+贪心)
- 修改文件 华为交换机_华为交换机系统文件管理配置命令大全(二)
- mysql int(3)_MySQL中int(11)与int(3)的区别_MySQL
- 前端学习 第二弹: JavaScript中的一些函数与对象(1)
- [云原生专题-45]:Kubesphere云治理-基于Kubernetes 构建的企业级容器平台简介与总体架构
- 领英常见问题—如何提高邀请通过率与账号曝光量
- 教你配电脑:电脑小白如何选购笔记本电脑,笔记本性能知识,干货来了
- 什么是Android逆向?如何学习安卓逆向?Android逆向自学笔记入门到实战
- Nexus私服安装以及使用教程
- 2022,程序员应该如何找工作
- Chris Guillebeau: 做什么由自己决定 - 人物志第17篇
- php微信 开发笔记,PHP微信公众开发笔记(一)
- 我国非按劳分配收入初探
- windows下 C 程序 调用其他程序常见新的进程CreateProcess以及通过TerminateProcess终止进程
- IM即时通讯开发群聊消息的已读回执功能该怎么实现?
- 前端使用RSA对密码进行加密