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