「@import」を使用して通常の CSS ファイルを SCSS にインポートできますか?

@import を使用した SCSS への通常の CSS ファイルのインポート

多くの開発者は、名前を変更せずに SCSS の統合および圧縮機能を望んでいることに気づいています。すべてのファイルを *.scss にコピーします。これに対処するには、@import コマンドを使用して通常の CSS ファイルを SCSS にインポートすることは可能ですか?

回答

当初、このアプローチは課題に直面していました。コミュニティ内の混乱を引き起こします。ただし、2014 年 12 月の時点で、この問題は GitHub プル リクエストを通じて解決されました。

CSS ファイルを SCSS に直接インポートするための更新された構文は、@import "your/path/to/the/file" です。ファイル名の後にファイル拡張子が続きます。これにより、ファイルが直接インポートされます。

*.css 拡張子が追加されると、CSS ルール @import url(...) に変換されます。

webpack のようなモジュール バンドラーの場合、パスの先頭に ~ を使用することをお勧めします。ファイルnode_modules/bootstrap/src/core.scssをインポートするには、@import "~bootstrap/src/core"を使用するだけです。

重要な注意

注意する価値があります。この解決策がすべての人に効果があるわけではないことを理解してください。インタプリタが libsass に基づいている場合は、期待どおりに機能するはずです。一方で、node-sass では動作することがわかっていますが、特定の Ruby インスタンスでは動作しない可能性があります。

以上が「@import」を使用して通常の CSS ファイルを SCSS にインポートできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。