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

15294 ワード
webpack CSS YARN scss CSS テキストリンク

参考文献

npm(yarn) scriptでSCSSコンパイル機能付きの開発環境を構築する
【初心者向け】NPMとpackage.jsonを概念的に理解する
node-sassでディレクトリにあるsassの変更をwatchして勝手にコンパイルしてくれる（yarn環境）
yarn run
Sass を気軽にインストール

状況

開発環境を整えたタイミングで、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.
設計モードのPrototype(c++)
cocos 2 dx学習ノート(一)環境構築