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

VSCode で拡張機能Live Sass Compiler をインストールして、settings.json で .map.cssが生成されないようにする設定。

Sass導入に至った経緯

CSS書くのがめんどくさいなーと思ってたので、とりあえずSCSSから挑戦。

Live Sass Compilerをインストール

VSCodeの拡張機能Live Sass Compilerをインストール。
Live Server もインストールしておくと上書き保存の度にブラウザに反映されていいですね。
image.png

settings.jsonの設定

色々な設定が{}の中にすでに書かれていると思いますが、その中に記述。
一番上の何とかmap false が.map.cssを生成しないようにする記述です。
デフォルトでは生成されるので、何かしらの意味があるのだと思いますが、今は置いておきます。(永遠に置いておくかも)

その下のformatなんちゃらは、expandにすることでcssにコンパイルされるときに、見やすい形にインデントされたフォーマットで出力されます。

extensionNameのところは.min.csszじゃなくて.cssで生成してねっていう設定。

savePathは、cssファイルを生成する場所の設定。distっていう中のcssフォルダの中に生成してねと設定してます。

ちなみにindex.scssをコンパイルするとindex.cssができます。

setteings.json
{
~ほかの設定たち~
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/dist/css/"
        }
    ]
~ほかの設定たち~
}

階層

くっそあなろぐ。
image.png

保存してもコンパイルされないとき

一番最初のコンパイルはたぶんWatchSassマークを押さないといけないっぽい。(エディタの下のほうにあるやつ)そのあとからは保存の度にコンパイルされる。一回押すとWatchingになる。
image.png

Why do not you register as a user and use Qiita more conveniently?
  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
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