是否有任何方法可以用Sass的@import命令导入一个常规的CSS文件?虽然我没有使用sass的所有SCSS语法,但我仍然喜欢它的组合/压缩功能,并且希望能够使用它,而不必将我的所有文件重命名为*.scss


当前回答

在遇到同样的问题后,我对这里所有的答案和github中sass库的评论感到困惑。

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

语法和现在一样——@import "your/path/to/ The /file",文件名后面没有扩展名。这将直接导入您的文件。如果在末尾添加*.css,它将转换为css规则@import url(…)。

如果你正在使用一些“花哨的”新模块捆绑器,比如webpack,你可能需要在路径的开头使用use ~。所以,如果你想导入以下路径node_modules/bootstrap/src/core。SCSS你可以写@import "~bootstrap/src/core"。

注意: 这似乎并不适用于所有人。如果你的解释器是基于libsass的,它应该可以正常工作(签出这个)。我已经在node-sass上使用@import进行了测试,它工作得很好。不幸的是,这是可行的,但在一些ruby实例上不起作用。

其他回答

好消息,Chris Eppstein创建了一个带有内联css导入功能的compass插件:

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

现在,导入CSS文件就像这样简单:

@import "CSS:library/some_css_file"

简单的解决方案:

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

我想出了一种优雅的、类似rails的方法。首先,将.scss文件重命名为.scss。然后使用这样的语法(例如highlight_js-rails4 gem CSS资产):

@import "<%= asset_path("highlight_js/github") %>";

为什么你不能通过SCSS直接托管文件:

只要以某种方式显式地使用完整路径,在SCSS中执行@import对于CSS文件就可以正常工作。在开发模式下,rails为资产服务而不编译它们,所以像这样的路径可以工作…

@import "highlight_js/github.css";

...因为托管路径就是/assets/highlight_js/github.css。如果你在页面上右键单击“查看源代码”,然后用上面的@import点击样式表的链接,你会看到一行看起来像这样:

@import url(highlight_js/github.css);

SCSS引擎将“highlight_js/github.css”转换为url(highlight_js/github.css)。这将很顺利,直到您决定尝试在预编译资产的生产环境中运行它,并在文件名中注入散列。SCSS文件仍然会解析为一个静态/assets/highlight_js/github.css,这个文件没有预编译,在生产环境中也不存在。

这个解决方案是如何工作的:

首先,通过移动.scss文件到.scss。当然,我们已经有效地把SCSS变成了Rails的模板。现在,每当我们使用<%=…%>模板标记时,Rails模板处理器将用代码的输出替换这些代码段(就像任何其他模板一样)。

在.scss中声明asset_path("highlight_js/github")。Erb文件做两件事:

触发rake assets:precompile任务来预编译适当的CSS文件。 生成一个适当反映资产的URL,而不考虑Rails环境。

这也意味着SCSS引擎甚至不会解析CSS文件;它只是托管了一个链接!所以没有矫揉造作的补丁或粗制滥造的变通办法。我们通过SCSS来提供CSS资产,并使用URL来表示CSS资产。甜蜜的!

在遇到同样的问题后,我对这里所有的答案和github中sass库的评论感到困惑。

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

语法和现在一样——@import "your/path/to/ The /file",文件名后面没有扩展名。这将直接导入您的文件。如果在末尾添加*.css,它将转换为css规则@import url(…)。

如果你正在使用一些“花哨的”新模块捆绑器,比如webpack,你可能需要在路径的开头使用use ~。所以,如果你想导入以下路径node_modules/bootstrap/src/core。SCSS你可以写@import "~bootstrap/src/core"。

注意: 这似乎并不适用于所有人。如果你的解释器是基于libsass的,它应该可以正常工作(签出这个)。我已经在node-sass上使用@import进行了测试,它工作得很好。不幸的是,这是可行的,但在一些ruby实例上不起作用。

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

@import "yourfile";

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