1. HOME»
  2. プログラミング・Web»
  3. CSS»
  4. 【Sass】@useでリセットCSSなどを組み込む方法

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

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

目次
  1. 必要なものをインストール
  2. SassからCSSを読み込む(@use)
  3. Sassをコンパイル
  4. まとめ

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

まず、 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などを使いたいときは、この方法を使うことで、ファイルをひとつにまとめることができて便利です。

オリジナルゲーム.com