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

CSS

西门阳光

2020-03-17

无论如何,是否可以使用Sass的@import命令导入常规CSS文件尽管我没有使用sass的所有SCSS语法,但我仍然喜欢它的合并/压缩功能,并且希望能够在不将我的所有文件重命名为* .scss的情况下使用它

第1921篇《在SCSS文件中导入常规CSS文件?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
西门路易 2020.03.17

简单。

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

Itachi伽罗 2020.03.17

如果我没错,css与scss兼容,那么您可以将css的扩展名更改为scss,它应该可以继续工作。更改扩展名后,您可以导入它,该扩展名将包含在文件中。

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

十三Tom小哥 2020.03.17

如果您有.css不想修改文件,也没有将其扩展名更改为.scss例如,该文件来自您未维护的分支项目),则始终可以创建符号链接,然后将其导入.scss

创建一个符号链接:

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


将symlink文件导入目标.scss

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


您的目标输出.css文件将保存导入的符号链接.scss文件中的内容,而不是CSS导入规则(@yaz以最高的评论票数提及)。而且您没有具有不同扩展名的重复文件,这意味着在初始.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

樱Gil泡芙 2020.03.17

您必须在要包含的css文件之前加一个下划线,然后将其扩展名切换为scss(例如:)_yourfile.scss然后,您只需要这样调用它:

@import "yourfile";

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

GOGil老丝 2020.03.17

简单的解决方法:

所有或几乎所有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工件(这不太可能,但是如果发生,则结果将很难调试且很危险)。

Tony樱番长 2020.03.17

大家好消息,克里斯·埃普斯坦(Chris Eppstein)创建了一个具有嵌入式CSS导入功能的指南针插件:

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

现在,导入CSS文件非常简单:

@import "CSS:library/some_css_file"
阿飞西门 2020.03.17

在撰写本文时,这似乎尚未实现:

https://github.com/sass/sass/issues/193

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

@import "path/to/file";

这将导入path/to/file.css

有关更多详细信息,请参见此答案

查看此答案以了解Ruby实现(无礼的宝石)

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android