状況
開発環境を整えたタイミングで、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ファイルを作成し、コンパイルすることができた。
今度は編集したscssファイルをAutoloadする方法を探りたい。
