web-dev-qa-db-ja.com

SCSSファイルに通常のCSSファイルをインポートしますか？

Sassの@importコマンドで通常のCSSファイルをインポートする方法はありますか？私はsassのSCSS構文のすべてを使用しているわけではありませんが、それでも機能の結合/圧縮を楽しんでいます。ファイルの名前をすべて* .scssに変更しなくても使用できるようにしたいです。

sass
441
GSto

これを書いている時点では、これは実装されていないようです。

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

Libsass（C/C++実装）の場合、importは*.cssファイルの場合と同じ方法で*.scssに対して機能します。拡張子を省略するだけです。

@import "path/to/file";

これはpath/to/file.cssをインポートします。

詳しくは この答え をご覧ください。

この答え / Rubyの実装について（sass gem）

159
Stephen Fuhry

同じ問題が発生した後、私はここでのすべての答えと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に基づいている場合、shouldは正常に動作しています（チェックアウト this ）。 node-sassで@importを使用してテストしましたが、正常に機能しています。残念ながら、これは一部のRubyインスタンスでは機能し、機能しません。

364
tftd

インクルードするcssファイルの前にアンダースコアを付け、その拡張子をscssに変更する必要があります（例：_yourfile.scss）。それならあなたはそれをこのように呼ぶだけです：

@import "yourfile";

また、CSS標準の@importディレクティブを使用する代わりに、ファイルの内容が含まれます。

254
David Morales

皆さん、Chris EppsteinがインラインCSSインポート機能を備えたコンパスプラグインを作成しました。

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

今、CSSファイルをインポートするのは簡単です：

@import "CSS:library/some_css_file"
35
Rafal Pastuszak

変更したくない.cssファイルがある場合は、その拡張子を.scssこのファイルはあなたが管理していないフォークプロジェクトからのものです）にも変更しないでください。シンボリックリンクを作成してから、を自分の.scssにインポートします。

シンボリックリンクを作成します。

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


シンボリックリンクファイルをターゲットの.scssにインポートします。

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


あなたのターゲット出力.cssファイルは、CSSインポート規則ではなく、インポートされたシンボリックリンク.scssファイルからのコンテンツを保持しようとしています（最もコメントの多い投票で@yazで言及）また、拡張子の異なるファイルが重複していないため、最初の.cssファイル内で行われた更新はすぐにターゲットの出力にインポートされます。

シンボリックリンク（シンボリックリンクまたはソフトリンク）は、絶対パスまたは相対パスの形式で別のファイルへの参照を含む特別な種類のファイルで、パス名の解決に影響を与えます。
- http://en.wikipedia.org/wiki/Symbolic_link

18
Nik Sumeiko

サードパーティーの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 config：

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が失敗する

一般に、カスタムインポーターは any importセマンティクスを変更する可能性があることに注意してください。使い始める前にドキュメントを読んでください。

5
joews

私が正しいとすればcssはscssと互換性があるので、あなたはcssの拡張子をscssに変更することができ、それは動作し続けるはずです。拡張子を変更したら、インポートしてファイルに含めることができます。

そうしないと、sassはcss @importを使いますが、これはあなたが望まないものです。

4
Pickels

私はそれを実行するためのエレガントでRails風の方法を考え出しました。まず、.scssファイルの名前を.scss.erbに変更してから、次のような構文を使用します（ highlight_js-Rails4 gem CSSアセットの例 ）。

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

なぜSCSSでファイルを直接ホストできないのか ：

何らかの方法で明示的にフルパスを使用している限り、SCSSで@importを実行しても問題ありません。開発モードでは、Rails sはコンパイルせずにアセットを提供します。そのため、このようなパスは機能します。

@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.erbに移動することで、SCSSをRails用のテンプレートに効果的に変換しました。 <%= ... %>テンプレートタグを使用するときはいつでも、Railsテンプレートプロセッサはこれらのスニペットをコードの出力に置き換えます（他のテンプレートとまったく同じです）。

.scss.erbファイルにasset_path("highlight_js/github")を記述すると、2つのことが行われます。

  1. 適切なCSSファイルをプリコンパイルするためにrake assets:precompileタスクを起動します。
  2. Rails環境に関係なく、資産を適切に反映したURLを生成します。

これはまた、SCSSエンジンがCSSファイルを解析していないことを意味します。リンクを張っているだけです。だから猿のパッチや大きな回避策はありません。意図したとおりにSCSS経由でCSSアセットを提供し、Railsが意図したとおりにそのCSSアセットをURLで使用します。甘い！

2
Synthead

簡単な回避策：

すべて、またはほとんどすべてのcssファイルも、まるでそれがscssであるかのように解釈することができます。ブロック内にインポートすることも可能です。 CSSの名前をscssに変更してインポートします。

私の実際の構成では、次のことを行います。

最初に、.cssファイルを一時ファイルにコピーします。今回は.scss拡張子を付けます。 Grunt example config：

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にscssが解釈可能なアーティファクトが含まれているかどうかをチェックしてください（それはありえませんが、もし起こるなら、結果はデバッグするのが難しく危険です）。

0
peterh