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

Question

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

Answer 1

在遇到同样的问题之后,我对这里的所有答案以及对github中sass存储库的评论感到困惑.

我只想指出,截至2014年12月,此问题已得到解决.现在可以将css文件直接导入到sass文件中.github中的以下PR解决了这个问题.

语法与现在相同 - @import "your/path/to/the/file"在文件名后没有扩展名.这将直接导入您的文件.如果您追加*.css到最后,它将转换为css规则@import url(...).

如果您正在使用一些"花哨的"新模块捆绑包(如webpack),您可能需要~在路径的开头使用.所以,如果你想导入以下路径,node_modules/bootstrap/src/core.scss你会写出类似的东西
@import "~bootstrap/src/core".

注意:
似乎这对每个人都不起作用.如果你的翻译是基于libsass它应该工作正常(结帐这个).我已经@import在node-sass上测试过,它运行正常.不幸的是,这有效并且不适用于某些ruby实例.

Answer 2

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

@import "yourfile";

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

Answer 3

这是实现和版本合并开始3.2(拉#754合并于2015年1月2日进行libsass,问题的渊源进行了定义如下:sass#193 #556,libsass#318).

简而言之,下一步的语法:

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

   语法最后没有.css扩展(导致实际读取部分s[ac]ss|css并包含内联到SCSS/SASS):

   @import "path/to/file";

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

   语法去传统的方式,以.css延长末(结果@import url("path/to/file.css");在编译的CSS):

   @import "path/to/file.css";

这太棒了:这种语法优雅而简洁,加上向后兼容!它非常适合libsass和node-sass.

__

为了避免在评论中进一步推测,明确地写下这个:基于Ruby的Sass在经过7年的讨论后仍然没有实现这个功能.在写这个答案的时候,它承诺在4.0中有一个简单的方法来完成这个,可能是借助于@use.似乎很快就会有一个实现,为问题#556和新功能分配了新的"计划的" "建议已接受"标签.@use

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

Answer 4

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

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

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

@import "path/to/file";

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

有关详细信息,请参阅此答案.

查看Ruby实现的答案(sass gem)

Answer 5

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

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

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

@import "CSS:library/some_css_file"

Answer 6

如果你有一个.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

Answer 7

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

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 失败

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