Sassの@import
コマンドで通常のCSSファイルをインポートする方法はありますか?私はsassのSCSS構文のすべてを使用しているわけではありませんが、それでも機能の結合/圧縮を楽しんでいます。ファイルの名前をすべて* .scssに変更しなくても使用できるようにしたいです。
これを書いている時点では、これは実装されていないようです。
https://github.com/sass/sass/issues/193
Libsass(C/C++実装)の場合、importは*.css
ファイルの場合と同じ方法で*.scss
に対して機能します。拡張子を省略するだけです。
@import "path/to/file";
これはpath/to/file.css
をインポートします。
詳しくは この答え をご覧ください。
この答え / Rubyの実装について(sass gem)
同じ問題が発生した後、私はここでのすべての答えと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インスタンスでは機能し、機能しません。
インクルードするcssファイルの前にアンダースコアを付け、その拡張子をscssに変更する必要があります(例:_yourfile.scss
)。それならあなたはそれをこのように呼ぶだけです:
@import "yourfile";
また、CSS標準の@importディレクティブを使用する代わりに、ファイルの内容が含まれます。
皆さん、Chris Eppsteinがインライン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
シンボリックリンクファイルをターゲットの.scss
にインポートします。
@import "path/to/sass/files/file";
あなたのターゲット出力.css
ファイルは、CSSインポート規則ではなく、インポートされたシンボリックリンク.scss
ファイルからのコンテンツを保持しようとしています(最もコメントの多い投票で@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 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セマンティクスを変更する可能性があることに注意してください。使い始める前にドキュメントを読んでください。
私が正しいとすればcssはscssと互換性があるので、あなたはcssの拡張子をscssに変更することができ、それは動作し続けるはずです。拡張子を変更したら、インポートしてファイルに含めることができます。
そうしないと、sassはcss @importを使いますが、これはあなたが望まないものです。
私はそれを実行するためのエレガントで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つのことが行われます。
rake assets:precompile
タスクを起動します。これはまた、SCSSエンジンがCSSファイルを解析していないことを意味します。リンクを張っているだけです。だから猿のパッチや大きな回避策はありません。意図したとおりにSCSS経由でCSSアセットを提供し、Railsが意図したとおりにそのCSSアセットをURLで使用します。甘い!
簡単な回避策:
すべて、またはほとんどすべての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が解釈可能なアーティファクトが含まれているかどうかをチェックしてください(それはありえませんが、もし起こるなら、結果はデバッグするのが難しく危険です)。