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

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

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

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

libsass（C / C ++実装）の場合、インポート*.cssは*.scssファイルの場合と同じように機能します-拡張子を省略します。

@import "path/to/file";

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

詳細については、この回答を参照してください。

Rubyの実装（sass gem）については、この回答を参照してください

同じ問題が発生した後、私はここでのすべての回答とgithubのsassのリポジトリに関するコメントに混乱しました。

2014年12月にこの問題が解決されたことを指摘しておきます。csssassファイルにファイルを直接インポートできるようになりました。githubにある次のPRが問題を解決します。

構文は今と同じです- @import "your/path/to/the/file"ファイル名の後に拡張子がありません。これにより、ファイルが直接インポートされます。*.css最後に追加すると、cssルールに変換され@import url(...)ます。

ケースには次のような「空想」新しいモジュールbundlersの一部を使用しているのWebPACK、おそらく使用使用する必要があります~パスの先頭に。したがって、次のパスをインポートするnode_modules/bootstrap/src/core.scss場合は、のように記述します
@import "~bootstrap/src/core"。

注：
これはすべての人に効果があるわけではないようです。インタープリターがそれに基づいてlibsassいる場合、それは正常に動作するはずです（これをチェックアウトしてください）。私は@importnode-sassで使用してテストしましたが、うまく機能しています。残念ながら、これは機能し、一部のRubyインスタンスでは機能しません。

インクルードするcssファイルにアンダースコアを付加し、その拡張子をscssに切り替える必要があります（例：）_yourfile.scss。次に、次のように呼び出す必要があります。

@import "yourfile";

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

これは実装され、バージョンからマージされました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。

__

この明示的に書いて、コメントでさらに憶測を避けるために：ルビーベースのサスはまだこの機能がある未実装の議論の7年後に。この回答を書いている時点では、4.0には、おそらくの助けを借りてこれを実現する簡単な方法があることが約束されています@use。実装は間もなく行われるようです。問題「556」と新しい機能に、新しい「計画済み」「プロポーザル承認済み」タグが割り当てられました。@use

何かが変更されるとすぐに回答が更新される場合があります。

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

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

CSSファイルのインポートは次のように簡単です。

@import "CSS:library/some_css_file"

あなたが持っていない場合は.css変更したくないファイルを、どちらにその拡張子を変更.scss（例：このファイルは、あなたが維持していないフォークプロジェクトからである）、あなたはいつでもできますシンボリックリンクを作成し、それをインポートし、あなたに.scss。

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

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

symlinkファイルをターゲットにインポートします.scss。

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

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

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

サードパーティ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 失敗する

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

私が正しい場合、cssはscssと互換性があるので、cssの拡張子をscssに変更しても機能します。拡張子を変更したらインポートでき、ファイルに含まれます。

そうしないと、sassは不要なcss @importを使用します。

エレガントなRailsのような方法を見つけました。まず、.scssファイルの名前をに変更し、次の.scss.erbような構文を使用します（highlight_js-rails4 gem CSSアセットの例）：

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

SCSSを介してファイルを直接ホストできない理由：

こう@importSCSSでは、長い間、あなたが明示的に完全なパス一つの方法または別のものを使用してのようにCSSファイルの罰金に動作します。開発モードで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プリコンパイルされておらず、本番環境には存在しないstaticに解決されます。

このソリューションの仕組み：

まず、.scssファイルを.scss.erbに移動することにより、SCSSを効果的にRailsのテンプレートに変換しました。これで、<%= ... %>テンプレートタグを使用するたびに、Railsテンプレートプロセッサがこれらのスニペットをコードの出力に置き換えます（他のテンプレートと同様）。

明記asset_path("highlight_js/github")して.scss.erbファイルには、2つのことを行います。

1. rake assets:precompile適切なCSSファイルをプリコンパイルするタスクをトリガーします。
2. Rails環境に関係なく、アセットを適切に反映するURLを生成します。

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

簡単な回避策：

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

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

まず、.cssファイルを一時ファイルにコピーします。今回は.scss拡張子を付けます。グラントの設定例：

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で解釈可能なアーティファクトが含まれていないことを確認します（それはありそうもないことですが、発生した場合、結果はデバッグが難しく危険です）。

以下を使用して可能になりました。

@import 'CSS:directory/filename.css';

私はこの作品を確認できます：

class CSSImporter < Sass::Importers::Filesystem
  def extensions
    super.merge('css' => :scss)
  end
end

view_context = ActionView::Base.new
css = Sass::Engine.new(
  template,
  syntax:     :scss,
  cache:      false,
  load_paths: Rails.application.assets.paths,
  read_cache: false,
  filesystem_importer: CSSImporter # Relevant option,

  sprockets:  {
    context:     view_context,
    environment: Rails.application.assets
  }
).render

Chriss Epstein氏の功績：https : //github.com/sass/sass/issues/193

シンプル。

@import "パス/to/file.css";