scssがcssにコンパイルされない

# 参考文献
[npm(yarn) scriptでSCSSコンパイル機能付きの開発環境を構築する](https://blog.torch-design.work/npm-yarn-starter-kit/)
[【初心者向け】NPMとpackage.jsonを概念的に理解する](https://qiita.com/righteous/items/e5448cb2e7e11ab7d477)
[node-sassでディレクトリにあるsassの変更をwatchして勝手にコンパイルしてくれる（yarn環境）](https://qiita.com/urchin2x/items/87ec89559c1b2ab8e1b1)
[yarn run](https://classic.yarnpkg.com/en/docs/cli/run)
[Sass を気軽にインストール](https://qiita.com/FumiyaShibusawa/items/9fab0dacaa99920a8611)


# 状況
開発環境を整えたタイミングで、`yarn watch`しても、scssがccsにコンパイルされない。
原因がわからない状態で、一旦試しに実行したため動かないのは当たり前。

現状を把握するため、

```package.json
{
  "name": "wp-localsetup",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "watch": "webpack --watch --mode=production",
    "build": "webpack --mode=production"
  },
  "test": "echo \"Error: no test specified\" && exit 1",
  "devDependencies": {
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.4",
    "node-sass": "^4.10.0",
    "npm-run-all": "^4.1.3",
    "style-loader": "^0.23.1",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

```

pakage.jsonにsassとsass-lodaerが記述されていないことがわかった。

# package.jsonにsassを追加する

```
yarn add --dev sass
```

# package.jsonにsass-loaderを追加する

```
yarn add --dev sass-loader
```

```package.json
{
  "name": "wp-localsetup",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "watch": "webpack --watch --mode=production",
    "build": "webpack --mode=production"
  },
  "test": "echo \"Error: no test specified\" && exit 1",
  "devDependencies": {
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.4",
    "node-sass": "^4.10.0",
    "npm-run-all": "^4.1.3",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "style-loader": "^0.23.1",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

```

＊sassとsass-loaderがpakage.jsonによって管理されるようになった。

# scriptの追加
```package.json
{
  "name": "wp-localsetup",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "watch": "webpack --watch --mode=production",
    "build": "webpack --mode=production",
    "css/scss": "node-sass path/to/css/***.scss -o path/to/css/ --output-style expanded --source-map path/to/css/"
  },
  "test": "echo \"Error: no test specified\" && exit 1",
  "devDependencies": {
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.4",
    "node-sass": "^4.10.0",
    "npm-run-all": "^4.1.3",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "style-loader": "^0.23.1",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}
```

# yarnの実行
```
> % yarn run css/scss
yarn run v1.22.4
$ node-sass path/to/css/***.scss -o path/to/css/ --output-style expanded --source-map path/to/css/
Rendering Complete, saving .css file...
Wrote Source Map to path/to/css/site.css.map
Wrote CSS to path/to/css/site.css
✨  Done in 0.50s.
```

無事実行はできてscssからcssファイルを作成し、コンパイルすることができた。

# 編集したら自動更新するようにスクリプトを変更
```pakage.json
{
  "name": "wp-localsetup",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "watch": "webpack --watch --mode=production",
    "build": "webpack --mode=production",
    "css/scss": "node-sass public_html/wp-content/themes/la-liaison/css/site.scss -o public_html/wp-content/themes/la-liaison/css/ --output-style expanded --source-map public_html/wp-content/themes/la-liaison/css/",
    "sass-watch": "sass --watch path/to/site.scss path/to/site.css"
  },
  ＊＊＊以下省略＊＊＊
}
```

```
-> % yarn run sass-watch
yarn run v1.22.4
$ sass --watch public_html/wp-content/themes/la-liaison/css/site.scss public_html/wp-content/themes/la-liaison/css/site.css
Compiled public_html/wp-content/themes/la-liaison/css/site.scss to public_html/wp-content/themes/la-liaison/css/site.css.
Sass is watching for changes. Press Ctrl-C to stop.
```