【Sass】@useでリセットCSSなどを組み込む方法

Sassの@useを使って、リセットCSSなどのCSSを直接ファイルに組み込む方法を紹介します。
今回は例として、よく使われているリセットCSS、「destyle.css」をCSSに組み込みます。

必要なものをインストール

まず、 destyle.cssをインストールしてみましょう。
以下を実行します。

$ npm install destyle.css

さらに、sassをインストールします。

$ npm install --save-dev sass

SassからCSSを読み込む（@use）

では、 Sassファイルからdestyle.cssを読み込んでみましょう。

src/scss/style.scss

@use "../../node_modules/destyle.css/destyle.css";

Sassをコンパイル

では、Sassをコンパイルしてみましょう。

$ npx sass --no-source-map src/scss/:dist/css/

まとめ

Sassでは、@useを使うことで、CSSをそのまま組み込むことができます。
リセットCSSなどを使いたいときは、この方法を使うことで、ファイルをひとつにまとめることができて便利です。

• Tweet
• Facebook
• はてブ
• Pocket