More than 5 years have passed since last update.

SCSSの設定方法メモ

Last updated at 2019-07-05Posted at 2019-07-05

SCSSをセットアップする方法

普段フロントエンドライブラリはReactを使っているので、npm i node-sassし、touch something.styles.scssなどのファイルを作成するだけで問題なくSassを利用できていました。

が、Reactを使わない時もあると思うので、SCSSを使えるようにするまでの手順をメモします。

※ Node.jsが必須

まず`package.json`を作成。

npm init

次にSassをインストール

npm i sass

HTMLファイルと`styles.scss`を作成する。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- styles.cssを追加する。scssではない！ -->
    <link rel="stylesheet" href="styles.css" />
    <title>SASS</title>
  </head>
  <body>
    <h1>Hello SASS!</h1>
  </body>
</html>

SCSSを書く

styles.scss

$bgColor: orangered;


body {
  background: $bgColor;
}

scssをcssへコンパイルする

sass styles.scss:styles.css

そして、sass --watch styles.scss:styles.cssとすると、自動的にコンパイルしてくれます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

SCSSの設定方法 メモ