Visual Studio Codeからnode-sassを走らせるところでいろいろ混乱していたが、要は「package.json」と「tasks.json」ファイルの役割がよくわかっていなかった。
前回のようなパターンで、tasks.jsonに直接node-sassのコマンドを書いても、おそらくそちらのコマンドは動いていない。(package.jsonに書いてたほうが動いていたと思われる)
おそらく、実際に動くスクリプトは「package.json」に定義し、「tasks.json」には定義済みのどのスクリプトを動かすのかを定義する、といったパターンが正解か。
// package.json { "name": "hoge", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { // "スクリプト名":"スクリプト本体" "build-style.css": "node-sass style.scss style.css -w --output-style expanded" }, "author": "foo bar", "license": "ISC" } // tasks.json { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "build style", // VSCode上で表示される、ビルドタスクの名前 "type": "npm", "script": "build-style.css", // package.jsonに定義したスクリプト名 "problemMatcher": [] } ] }
とりあえず、このパターンでしばらく運用してみよう。
タグ:
#CSS #CSS拡張 #Visual Studio Code