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

Question

提问by GSto

Is there anyway to import a regular CSS file with Sass's @importcommand? While I'm not using all of the SCSS syntax from sass, I do still enjoy it's combining/compressing features, and would like to be able to use it without renaming all of my files to *.scss

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

Answer 1

采纳答案by Stephen Fuhry

~~Looks like this is unimplemented, as of the time of this writing:~~

~~在撰写本文时，这似乎尚未实现：~~

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

For libsass (C/C++ implementation), import works for *.cssthe same way as for *.scssfiles - just omit the extension:

对于 libsass（C/C++ 实现），import 的工作*.css方式与*.scss文件相同- 只需省略扩展名：

@import "path/to/file";

This will import path/to/file.css.

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

See this answerfor further details.

有关更多详细信息，请参阅此答案。

See this answerfor Ruby implementation (sass gem)

请参阅此答案以了解 Ruby 实现（sass gem）

Answer 2

回答by tftd

After having the same issue, I got confused with all the answers here and the comments over the repository of sass in github.

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

I just want to point out that as December 2014, this issue has been resolved. It is now possible to import cssfiles directly into your sass file. The following PRin github solves the issue.

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

The syntax is the same as now - @import "your/path/to/the/file", without an extension after the file name. This will import your file directly. If you append *.cssat the end, it will translate into the cssrule @import url(...).

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

In case you are using some of the "fancy" new module bundlers such as webpack, you will probably need to use use ~in the beginning of the path. So, if you want to import the following path node_modules/bootstrap/src/core.scssyou would write something like
@import "~bootstrap/src/core".

如果您正在使用一些“花哨的”新模块捆绑器，例如webpack，您可能需要~在路径的开头使用 use 。因此，如果您想导入以下路径，node_modules/bootstrap/src/core.scss您可以编写类似
@import "~bootstrap/src/core".

NOTE:
It appears this isn't working for everybody. If your interpreter is based on libsassit shouldbe working fine (checkout this). I've tested using @importon node-sass and it's working fine. Unfortunately this works and doesn't work on some ruby instances.

注意：
这似乎并不适合所有人。如果您的解释器基于libsass它应该可以正常工作（请查看此）。我已经@import在 node-sass 上测试过，它工作正常。不幸的是，这在某些 ruby 实例上有效并且无效。

Answer 3

回答by David Morales

You must prepend an underscore to the css file to be included, and switch its extension to scss (ex: _yourfile.scss). Then you just have to call it this way:

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

@import "yourfile";

And it will include the contents of the file, instead of using the CSS standard @import directive.

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

Answer 4

回答by Farside

This was implemented and merged starting from version 3.2(pull #754merged on 2 Jan 2015for libsass, issues originaly were defined here: sass#193 #556, libsass#318).

这是实现和版本合并开始3.2（拉＃754合并于2015年1月2日进行libsass，问题的渊源进行了定义如下：sass＃193 ＃556，libsass＃318）。

To cut the long story short, the syntax in next:

长话短说，接下来的语法：

to import (include) the raw CSS-file
the syntax is without .cssextension at the end (results in actual read of partial s[ac]ss|cssand include of it inline to SCSS/SASS):
@import "path/to/file";
to import the CSS-file in a traditional way
syntax goes in traditional way, with .cssextensionat the end (results to @import url("path/to/file.css");in your compiled CSS):
@import "path/to/file.css";

导入（包含）原始 CSS 文件
语法最后没有.css扩展（导致实际读取部分s[ac]ss|css并将其内联到 SCSS/SASS）：
@import "path/to/file";
以传统方式导入 CSS 文件
语法采用传统方式，末尾带有.css扩展名（导致@import url("path/to/file.css");编译后的 CSS）：
@import "path/to/file.css";

And it is damn good: this syntax is elegant and laconic, plus backward compatible! It works excellently with libsassand node-sass.

它非常好：这种语法优雅简洁，而且向后兼容！它与libsass和一起工作得很好node-sass。

__

To avoid further speculations in comments, writing this explicitly: Rubybased Sassstill has this feature unimplementedafter 7 years of discussions. By the time of writing this answer, it's promised that in 4.0 there will be a simple way to accomplish this, probably with the help of @use. It seems there will be an implementation very soon, the new ~~"planned"~~"Proposal Accepted" tag was assigned for the issue #556and the new @usefeature.

为了避免评论中的进一步猜测，明确地写下：基于Ruby的Sass在经过 7 年的讨论后仍然没有实现这个功能。在撰写此答案时，已承诺在 4.0 中将有一种简单的方法来完成此任务，可能在@use. 似乎很快就会有一个实现，新的~~“计划中的”~~“已接受提案”标签被分配给问题 #556和新@use功能。

answer might be updated, as soon as something changes.

一旦发生变化，答案可能会更新。

Answer 5

回答by Rafal Pastuszak

Good news everyone, Chris Eppstein created a compass plugin with inline css import functionality:

大家好消息，Chris Eppstein 创建了一个带有内联 css 导入功能的指南针插件：

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

Now, importing a CSS file is as easy as:

现在，导入 CSS 文件非常简单：

@import "CSS:library/some_css_file"

Answer 6

回答by Nik Sumeiko

If you have a .cssfile which you don't wish to modify, neither change its extension to .scss(e.g. this file is from a forked project you don't maintain), you can always create a symlink and then import itinto your .scss.

如果您有一个.css不想修改的文件，也不要将其扩展名更改为.scss（例如，此文件来自您不维护的分叉项目），您始终可以创建一个符号链接，然后将其导入到您的.scss.

Creates a symlink:

创建符号链接：

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

Imports symlink file into a target .scss:

将符号链接文件导入目标.scss：

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

Your target output .cssfile is going to hold contents from imported symlink .scssfile, not a CSS import rule (mentioned by @yaz with highest comment votes). And you don't have duplicated files with different extensions, what means any update made inside initial .cssfile immediately gets imported into your target output.

您的目标输出.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

符号链接（也称为符号链接或软链接）是一种特殊类型的文件，它以绝对或相对路径的形式包含对另一个文件的引用，并且会影响路径名解析。
– http://en.wikipedia.org/wiki/Symbolic_link

Answer 7

回答by joews

You can use a third-party importerto customise @importsemantics.

您可以使用第三方importer来自定义@import语义。

node-sass-import-once, which works with node-sass(for Node.js) can inline import CSS files.

node-sass-import-once与node-sass 一起使用（用于 Node.js）可以内联导入 CSS 文件。

Example of direct usage:

直接使用示例：

var sass = require('node-sass');,
    importOnce = require('node-sass-import-once');

sass.render({
  file: "input.scss",
  importer: importOnce,
  importOnce: {
    css: true,
  }
});

Example grunt-sassconfig:

示例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"
      }
    }
  });

Note that node-sass-import-once cannot currently import Sass partials without an explicit leading underscore. For example with the file partials/_partial.scss:

请注意， node-sass-import-once 当前无法在没有显式前导下划线的情况下导入 Sass 部分。例如文件partials/_partial.scss：

@import partials/_partial.scsssucceeds
@import * partials/partial.scssfails

@import partials/_partial.scss成功
@import * partials/partial.scss失败

In general, be aware that a custom importer could change anyimport semantics. Read the docs before you start using it.

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

Answer 8

回答by Pickels

If I am correct css is compatible with scss so you can change the extension of a css to scss and it should continue to work. Once you change the extension you can import it and it will be included in the file.

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

If you don't do that sass will use the css @import which is something you don't want.

如果你不这样做，sass 将使用你不想要的 css @import。

Answer 9

回答by Synthead

I figured out an elegant, Rails-like way to do it. First, rename your .scssfile to .scss.erb, then use syntax like this (example for highlight_js-rails4 gem CSS asset):

我想出了一种优雅的、类似于 Rails 的方式来做到这一点。首先，将您的.scss文件重命名为.scss.erb，然后使用这样的语法（例如highlight_js-rails4 gem CSS 资产）：

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

Why you can't host the file directly via SCSS:

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

Doing an @importin SCSS works fine for CSS files as long as you explicitly use the full path one way or another. In development mode, rails sserves assets without compiling them, so a path like this works...

@import只要您以一种或另一种方式明确使用完整路径，就可以在 SCSS 中执行 an in SCSS 文件。在开发模式下，在rails s不编译资产的情况下提供资产，所以这样的路径有效......

@import "highlight_js/github.css";

...because the hosted path is literally /assets/highlight_js/github.css. If you right-click on the page and "view source", then click on the link for the stylesheet with the above @import, you'll see a line in there that looks like:

...因为托管路径实际上是/assets/highlight_js/github.css. 如果您右键单击页面并“查看源代码”，然后单击带有上述样式表的链接@import，您将在其中看到如下所示的一行：

@import url(highlight_js/github.css);

The SCSS engine translates "highlight_js/github.css"to url(highlight_js/github.css). This will work swimmingly until you decide to try running it in production where assets are precompiled have a hash injected into the file name. The SCSS file will still resolve to a static /assets/highlight_js/github.cssthat was not precompiled and doesn't exist in production.

SCSS 引擎转换"highlight_js/github.css"为url(highlight_js/github.css). 这将顺利运行，直到您决定尝试在生产环境中运行它，其中预编译的资产将哈希注入到文件名中。SCSS 文件仍将解析为/assets/highlight_js/github.css未预编译且在生产中不存在的静态文件。

How this solution works:

此解决方案的工作原理：

Firstly, by moving the .scssfile to .scss.erb, we have effectively turned the SCSS into a template for Rails. Now, whenever we use <%= ... %>template tags, the Rails template processor will replace these snippets with the output of the code (just like any other template).

首先，通过将.scss文件移动到.scss.erb，我们有效地将 SCSS 变成了 Rails 的模板。现在，每当我们使用<%= ... %>模板标签时，Rails 模板处理器都会用代码的输出替换这些片段（就像任何其他模板一样）。

Stating asset_path("highlight_js/github")in the .scss.erbfile does two things:

asset_path("highlight_js/github")在.scss.erb文件中声明有两件事：

Triggers the rake assets:precompiletask to precompile the appropriate CSS file.
Generates a URL that appropriately reflects the asset regardless of the Rails environment.

触发rake assets:precompile任务以预编译适当的 CSS 文件。
无论 Rails 环境如何，都会生成一个适当反映资产的 URL。

This also means that the SCSS engine isn't even parsing the CSS file; it's just hosting a link to it! So there's no hokey monkey patches or gross workarounds. We're serving a CSS asset via SCSS as intended, and using a URL to said CSS asset as Rails intended. Sweet!

这也意味着 SCSS 引擎甚至不解析 CSS 文件；它只是托管一个链接！所以没有胡说八道的猴子补丁或粗略的解决方法。我们按照预期通过 SCSS 提供 CSS 资产，并按照 Rails 的预期使用该 CSS 资产的 URL。甜的！

Answer 10

回答by peterh - Reinstate Monica

Simple workaround:

简单的解决方法：

All, or nearly all css file can be also interpreted as if it would be scss. It also enables to import them inside a block. Rename the css to scss, and import it so.

所有或几乎所有 css 文件也可以解释为 scss。它还允许将它们导入到块中。将 css 重命名为 scss，然后导入。

In my actual configuration I do the following:

在我的实际配置中，我执行以下操作：

First I copy the .css file into a temporary one, this time with .scss extension. Grunt example config:

首先，我将 .css 文件复制到一个临时文件中，这次使用 .scss 扩展名。Grunt 示例配置：

copy: {
    dev: {
        files: [
            {
                src: "node_modules/some_module/some_precompiled.css",
                dest: "target/resources/some_module_styles.scss"
            }
        ]
    }
}

Then you can import the .scss file from your parent scss (in my example, it is even imported into a block):

然后你可以从你的父 scss 导入 .scss 文件（在我的例子中，它甚至被导入到一个块中）：

my-selector {
  @import "target/resources/some_module_styles.scss";
  ...other rules...
}

Note: this could be dangerous, because it will effectively result that the css will be parsed multiple times. Check your original css for that it contains any scss-interpretable artifact (it is improbable, but if it happen, the result will be hard to debug and dangerous).

注意：这可能很危险，因为它会有效地导致 css 被多次解析。检查您的原始 css 是否包含任何 scss 可解释的工件（这是不可能的，但如果发生，结果将难以调试且危险）。

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

提问by GSto

采纳答案by Stephen Fuhry

回答by tftd

回答by David Morales

回答by Farside

to import (include) the raw CSS-file

to import the CSS-file in a traditional way

导入（包含）原始 CSS 文件

以传统方式导入 CSS 文件

回答by Rafal Pastuszak

回答by Nik Sumeiko

回答by joews

回答by Pickels

回答by Synthead

回答by peterh - Reinstate Monica

相关推荐

最近更新

标签

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

提问by GSto

采纳答案by Stephen Fuhry

回答by tftd

回答by David Morales

回答by Farside

to import (include) the raw CSS-file

to import the CSS-file in a traditional way

导入（包含）原始 CSS 文件

以传统方式导入 CSS 文件

回答by Rafal Pastuszak

回答by Nik Sumeiko

回答by joews

回答by Pickels

回答by Synthead

回答by peterh - Reinstate Monica

相关推荐

使用 CSS 媒体查询检测屏幕宽度

CSS firefox - 自定义滚动条

CSS 如何将表格水平和垂直放置在div的中心

CSS 在引导程序中更改图标栏 (?) 颜色

相关推荐

最近更新

标签