是否有任何方法可以用Sass的@import命令导入一个常规的CSS文件?虽然我没有使用sass的所有SCSS语法,但我仍然喜欢它的组合/压缩功能,并且希望能够使用它,而不必将我的所有文件重命名为*.scss
当前回答
你必须在要包含的css文件前加上一个下划线,并将其扩展名切换为scss(例如:_yourfile.scss)。那么你只需要这样称呼它:
@import "yourfile";
它将包含文件的内容,而不是使用CSS标准的@import指令。
其他回答
简单。
@import “路径/到/文件.css”;
好消息,Chris Eppstein创建了一个带有内联css导入功能的compass插件:
https://github.com/chriseppstein/sass-css-importer
现在,导入CSS文件就像这样简单:
@import "CSS:library/some_css_file"
这是从3.2版本开始实现和合并的(2015年1月2日为libsass合并了#754,最初的问题定义在这里:sass#193 #556, libsass#318)。
长话短说,下面的语法:
导入(包括)原始css文件,语法是**,结尾没有' .css ' **扩展名(导致实际读取部分' s[ac]ss|css ',并将其内联到SCSS/SASS): @ import“路径/ /文件”; 以传统的方式导入CSS文件,语法按照传统的方式,**以' .css '扩展名**结尾(结果是' @import url("path/to/file.css"); '在你编译的CSS中): @ import“路径/ / file.css”;
它非常好:语法优雅简洁,而且向后兼容!它与libsass和node-sass一起出色地工作。
__
为了避免在评论中进一步猜测,明确地写下:基于Ruby的Sass在经过7年的讨论后仍然没有实现这个特性。在写这篇文章的时候,我们承诺在4.0中会有一个简单的方法来实现这一点,可能是@use的帮助。似乎很快就会有一个实现,新的“计划中的”“提案已接受”标签被分配给#556问题和新的@use特性。
UPD:在2020年10月26日,lib-sass被弃用,因此第556期立即关闭。
__
答案可能会更新,只要有一些变化。
如果我是正确的,css与scss兼容,所以你可以将css的扩展名更改为scss,它应该继续工作。一旦你改变了扩展名,你可以导入它,它将包含在文件中。
如果你不这样做,sass将使用css @import,这是你不想要的。
简单的解决方案:
所有或几乎所有的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构件(这是不可能的,但如果发生了,结果将很难调试和危险)。
推荐文章
- ' coll -xs-* '在引导4中不工作
- 什么是类="mb-0"在引导4?
- 当flexbox项目以列模式换行时,容器的宽度不会增长
- CSS单位- vh/vw和%之间的区别是什么?
- :在Sass中的伪元素选择器之后和之前
- <div>元素中的中心元素
- 如何选择一个元素与2类
- CSS @media打印问题与背景颜色;
- 样式输入元素以填充其容器的剩余宽度
- <字段集>调整大小错误;似乎有不可移动的“min-width: min-content”
- 子节点max-height: 100%溢出父节点
- 如何在表中删除行和列之间不需要的空间?
- Browserslist: canius -lite已经过时。请运行下一个命令' npm update caniuse-lite browserslist '
- 我如何在HTML中创建一个泪滴?
- 我怎么能强迫一个长字符串没有任何空白被包装?