質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

npm run watchやbuildしているが最新のscssが反映されない

donut4
donut4

総合スコア127

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

3回答

0リアクション

0クリップ

2538閲覧

投稿2020/07/16 04:27

編集2020/07/16 12:58

npm run buildやnpm run watchを行っているのですが
編集したscssやsassがブラウザ上で反映されません。(npmのエラーは出てません)

最初はgemでsassがインストールされなかったことに気づいて
インストールしたのですがそれでも反映されません。

気になることとしまして、
itermを使ってるのですが普通npm run watch中にCSSを変更したら
itermの通知が出るはずなんですがMacを変えた今回その通知が出ないのが気になることです。

何か心当たりがありましたら教えていただきたいです。

(かなり抽象的で申し訳ありません必要な情報があれば追記いたします。)

#気になること2
npm run build したときのログ

> eccube@4.0.0 build /Users/tom/dev/app > run-p build:* > eccube@4.0.0 build:js /Users/tom/dev/app > parcel build ./html/user_data/assets/es/customize.js --out-dir ./html/user_data/assets/js --out-file customize.js --target browser --bundle-node-modules > eccube@4.0.0 build:scss /Users/tom/dev/app > gulp ⠙ Building...[21:41:43] Using gulpfile ~/dev/app/gulpfile.js [21:41:43] Starting 'default'... [21:41:43] Starting '<anonymous>'... [21:41:43] Starting '<anonymous>'... [21:41:43] Starting '<anonymous>'... ⠹ Building customize.js...[21:41:43] Finished '<anonymous>' after 40 ms [21:41:43] Finished '<anonymous>' after 53 ms [21:41:43] Finished '<anonymous>' after 65 ms [21:41:43] Starting '<anonymous>'... [21:41:43] Starting '<anonymous>'... [21:41:43] Starting '<anonymous>'... [21:41:43] Finished '<anonymous>' after 20 ms ⠸ Building URI.js...[21:41:43] Finished '<anonymous>' after 39 ms [21:41:43] Finished '<anonymous>' after 41 ms [21:41:43] Finished 'default' after 128 ms ✨ Built in 1.77s. html/user_data/assets/js/customize.js.map ⚠️ 1.07 MB 310ms html/user_data/assets/js/customize.js 326.3 KB 572ms

↑ビルドされているのはjsだけ?

#追記
package.json

{ "name": "eccube", "version": "4.0.0", "description": "EC-CUBE EC open platform.", "main": "index.js", "directories": { "test": "tests" }, "scripts": { "check": "npm-check --update", "test": "echo \"Error: no test specified\" && exit 1", "clean": "echo \"Error: no clean specified\" && exit 1", "start": "echo \"Error: no start specified\" && exit 1", "build": "run-p build:*", "build:scss": "gulp", "build:js": "parcel build ./html/user_data/assets/es/customize.js --out-dir ./html/user_data/assets/js --out-file customize.js --target browser --bundle-node-modules", "watch": "run-p watch:*", "watch:scss": "gulp watch", "watch:js": "parcel watch ./html/user_data/assets/es/customize.js --out-dir ./html/user_data/assets/js --out-file customize.js --target browser --bundle-node-modules", "bash": "docker-compose exec ec-cube bash", "logs": "docker-compose logs -f ec-cube" }, "repository": { "type": "git", "url": "git+https://github.com/XXXXXXXX/xxxxxxxxxxx.git" }, "author": "", "license": "GPL-2.0", "bugs": { "url": "https://github.com/XXXXXXXX/xxxxxxxxxxx.git" }, "homepage": "https://www.xxxxxxx.net/", "dependencies": { "autoprefixer": "^9.8.5", "bootstrap": "^4.5.0", "bootstrap-sass": "^3.4.1", "cross-env": "^7.0.2", "css-mqpacker": "^7.0.0", "gulp": "^4.0.2", "gulp-clean-css": "^4.3.0", "gulp-notify": "^3.0.0", "gulp-pleeease": "^2.0.2", "gulp-plumber": "^1.2.1", "gulp-postcss": "^8.0.0", "gulp-pug": "^4.0.1", "gulp-rename": "^2.0.0", "gulp-sass": "^4.1.0", "gulp-sourcemaps": "^2.6.5", "husky": "^4.2.5", "jquery": "^3.5.1", "lint-staged": "^10.2.11", "node-sass-package-importer": "^5.3.2", "normalize.css": "^8.0.1", "npm-check": "^5.9.2", "npm-run-all": "^4.1.5", "parcel": "^1.12.4", "postcss-import": "^12.0.1", "run-sequence": "^2.2.1", "sort-css-media-queries": "^1.5.0", "uikit": "^3.5.4", "urijs": "^1.19.2" }, "browserslist": [ "last 2 versions" ], "devDependencies": { "gulp-imagemin": "^7.1.0" } }

#追記2
・npm i minimatch -Dをしました
をしたら脆弱性に関するメッセージが表示されました

npm WARN bootstrap@4.5.0 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself. + minimatch@3.0.4 updated 1 package and audited 2082 packages in 13.391s 43 packages are looking for funding run `npm fund` for details found 13 vulnerabilities (8 low, 4 moderate, 1 high) run `npm audit fix` to fix them, or `npm audit` for details

・npm audit fixしました。
をしてみても手動で直さないといけないパッケージがあるらしく
ここで詰まってしましました。

・npm auditしてhighのもの

┌───────────────┬──────────────────────────────────────────────────────────────┐ │ High │ Insufficient Entropy │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Package │ cryptiles │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Patched in │ >=4.1.2 │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Dependency of │ gulp-pleeease │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Path │ gulp-pleeease > pleeease > less > request > hawk > cryptiles │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ More info │ https://npmjs.com/advisories/1464 │ └───────────────┴──────────────────────────────────────────────────────────────┘

・npm ls cryptilesしてでたもの

eccube@4.0.0 /Users/tom/dev/app └─┬ gulp-pleeease@2.0.2 └─┬ pleeease@4.3.0 └─┬ less@2.7.3 └─┬ request@2.81.0 └─┬ hawk@3.1.3 └── cryptiles@2.0.5

cryptilesを削除しても変化起こらず、、、、、、

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。