Help us understand the problem. What is going on with this article?

express で scss を使う方法

More than 1 year has passed since last update.

やりたいこと

タイトルの通り。express-generator でプロジェクト作成したときにデフォルト(css)にしており、後から scss にしようとして微妙にハマったので方法をまとめておきます。

前提環境

実施した環境ということでご参考までに。Linux Mint は Ubuntu 互換のディストリビューションです。

カテゴリ ソフトウェア バージョン
OS Linux Mint 19 Tara Cinnamon x64 (Ubuntu 18.04 LTS ベース)
Node.js Node.js 10.15.3
Web Application Framework Express 4.16.0

やってみた

1. Node.js をインストール

※既にインストールされていて node コマンドが使える状態であればこの項目は飛ばしてください。

手順: Linux Mint に asdf で Node.js をインストールする

2. yarn (npm) で express-generator をグローバルにインストール

bash
yarn global add express-generator
# npm i -g express-generator

3. express-generator でプロジェクトを新規作成

bash
express express-scss-app --css=sass
cd ./express-scss-app
yarn install
# npm install

4. style.sassstyle.scss へ変更

bash
cd ./public/stylesheets
mv ./style.sass ./style.scss
変更前(style.sass)
body
  padding: 50px
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif

a
  color: #00B7FF
変更後(style.scss)
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

5. app.jssassMiddleware の設定を修正

indentedSyntax の設定をコメントの説明通り true から false へ変更。

app.js(変更前)
app.use(sassMiddleware({
  src: path.join(__dirname, 'public'),
  dest: path.join(__dirname, 'public'),
  indentedSyntax: true, // true = .sass and false = .scss
  sourceMap: true
}));
app.js(変更後)
app.use(sassMiddleware({
  src: path.join(__dirname, 'public'),
  dest: path.join(__dirname, 'public'),
  indentedSyntax: false, // true = .sass and false = .scss
  sourceMap: true
}));

6. 動作確認

Webサーバを起動します。

bash
yarn start
# npm start

ブラウザの開発者ツール(この画面は Chrome)で style.scss が読み込まれているか確認します。

所感

  • express-generator--css オプションの選択肢に compasssass があったので、compass でやるものと思ったのですが違いました。これ Ruby 用ですね。
  • 分かってしまうとなんてことないですね...
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした