如何使用 Sass(或其他工具)合并 .CSS 文件?

发布于 2024-11-02 09:20:37 字数 740 浏览 5 评论 0原文

我可以使用 Sass 使用 将多个 .SCSS 或 .SASS 输入文件编译为单个 .CSS 输出文件@import此处所述。

如果我使用 @import 包含普通的 .CSS 文件,它们不会合并。输出 .CSS 文件仍然包含 @import 指令。这是有道理的。

但是有没有办法可以覆盖这种行为,也许是命令行切换到 Sass 编译器?换句话说,我可以告诉 Sass 尝试强制合并 @import "foo.css"; 就像它是一个 .SCSS 文件一样吗?

我正在使用包含许多 .CSS 文件的第三方库 (Google Closure 库)。我只在我的项目中使用其中的一些。我宁愿避免手动解决方案,例如将所有这些文件重命名为 .SCSS(尽管这似乎有效)或将其内容复制并粘贴到我的 .SCSS 文件中(也有效)。我不想将它们全部提供给客户端导入。我真的希望 Sass 包含我“按原样”使用的几个 .CSS 文件并生成单个输出样式表。可能的?还有其他我应该查看的工具吗?

I can use Sass to compile multiple .SCSS or .SASS input files into a single .CSS output file using @import as described here.

If I use @import to include normal .CSS files, they are not merged. The output .CSS file still contains the @import directives. That makes sense.

But is there a way I can override this behavior, perhaps a command-line switch to the Sass compiler? In other words, can I tell Sass to attempt to forcibly merge @import "foo.css"; just as if it were a .SCSS file?

I'm using a third-party library (Google Closure Library) with many .CSS files. I'm only using a few of these in my project. I'd rather avoid manual solutions such as renaming all these files as .SCSS (although this seems to work) or copying and pasting their contents into my .SCSS file (also works). And I don't want to serve them all to be imported on the client-side. I'd really just like Sass to include the few .CSS files that I use 'as is' and produce a single output stylesheet. Possible? Are there any other tools I should look at?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

止于盛夏 2024-11-09 09:20:37

每个CSS文件也是一个有效的SCSS..因此,如果您更改需要“隐形”导入或合并到_filename.scss的文件,然后使用@import从主scss文件@import“ filename"; (扩展名可选)它应该编译为一个大的 CSS,其中没有 @import 语句,

编辑后添加:抱歉,在浏览器崩溃后刚刚看到您的编辑..,看看这不是您要找的内容,我不知道还有什么方法

every CSS file is a valid SCSS too.. so if you change the files you need "invisibly" imported or merged to _filename.scss then @import from the main scss file using @import "filename"; (extension optional) it should compile to one big CSS with no @import statements inside it

edited to add: sorry just saw your edit after a browser crash.. and see it's not what you're looking for, I don't know of another way

樱花落人离去 2024-11-09 09:20:37

我还没有找到在 Sass 中做到这一点的方法。

我的解决方法是直接从第三方库的 URL 导入它们。当然,这只适用于通过 URL 提供服务的 CSS 库。它仍在导入多个文件,但至少我不必重命名文件,也不必管理供应商 CSS 库的修改副本。

示例:

// ORIGINAL: locally managed, modified copy (bad), no @import in output (good)
@import 'my_modified_copy/closure/goog/css/common.scss';

// WORKAROUND: vendor-managed (good): @import in output (bad but acceptable)
@import 'http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css';

在发布之前,我可能会添加一个脚本来从供应商处获取当前版本,并将所有 .css 文件重命名为 .scss 文件。但就目前而言,上述解决方法对于开发来说是可以接受的。

I haven't found a way to do this in Sass.

My workaround is to import third part libraries directly from their URLs. Of course this only works for CSS libraries that are served via URLs. It's still importing multiple files but at least I don't have to rename files and otherwise manage a modified copy of the vendor's CSS library.

Example:

// ORIGINAL: locally managed, modified copy (bad), no @import in output (good)
@import 'my_modified_copy/closure/goog/css/common.scss';

// WORKAROUND: vendor-managed (good): @import in output (bad but acceptable)
@import 'http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css';

Before release, I'll probably add a script to pull a current version from the vendor and rename all .css files as .scss files. But for now, the above workaround is acceptable for development.

纵情客 2024-11-09 09:20:37

这可以在服务器端完成,如果可以的话,可以为您省去一些麻烦。由于您只是将文件合并在一起,而且它只是 CSS,因此信息中不应存在任何可能损害您网站的冲突。此外,随着框架的改进,这种方式使您可以灵活地更新 CSS。

Ruby 不是我选择的语言,但仍然非常可行,可以完成这里所需的一切。有一个用 Ruby 编写的工具可以使用 CSS 和 JS 文件来完成此操作。看看这篇博文来了解概要:
并且

我希望这对您有所帮助, 如果您还需要这方面的其他信息,请告诉我。

This can be done server-side and save you a bit of hassle if that's an option. Since you're just merging the files together and since it's just CSS there shouldn't be any conflicts in the information that should harm your site. Also, this way gives you flexibility to make updates to the CSS as frameworks are improved.

Ruby is not my language of choice but still very viable to do everything needed here. There is a tool out there written in Ruby that will do this for you with CSS as well as JS files. Take a look at this blog post to get the rundown:
http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool

I hope that this is helpful, and please let me know if you need anything else on this one.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文