Laravel: npm 运行 开发自定义 css 文件失败
Laravel: npm run dev fails for custom css file
所以我有 this css 文件。在 vagrant box 中执行 import style 和 运行 npm run dev 时出现以下错误：
错误编译失败，出现 16 个错误2:54:39AM
These relative modules were not found:
* ../images/img-sp.png in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/1.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/2.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/3.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/cart.png in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/arrow.png in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/12.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/16.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/17.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/21.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/25.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/26.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/27.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/28.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/star.png in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/star1.png in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
Asset Size Chunks Chunk Names
fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad 98 kB [emitted]
fonts/flexslider-icon.eot?9c9cb7a6055043933ba68854f521af45 2.08 kB [emitted]
fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1 20.1 kB [emitted]
fonts/flexslider-icon.svg?10e8a5455c4522c48aa975eacd4f0023 2.33 kB [emitted]
fonts/flexslider-icon.ttf?b4c9e5057989b9727a5df4e0a21af33c 1.89 kB [emitted]
fonts/flexslider-icon.woff?f8b92f66539473eea649c8514eb836a0 1.27 kB [emitted]
fonts/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde 444 kB [emitted] [big]
fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9 166 kB [emitted]
fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713 166 kB [emitted]
fonts/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e 77.2 kB [emitted]
fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760 109 kB [emitted]
fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512 45.4 kB [emitted]
fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158 23.4 kB [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb 18 kB [emitted]
/js/app.js 1.19 MB 0 [emitted] [big] /js/app
mix-manifest.json 32 bytes [emitted]
npm ERR! Linux 4.4.0-51-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script 'node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/vagrant/LaraProjects/golmarket.dev/npm-debug.log
它似乎无法找到或移动您的图片。它们是否被引用自 css，作为背景？可能与此重复：
您的 webpack.mix.js 文件是什么样的？您还需要确保在 webpack.mix.js 中正确引用 css。也许是这样的：
mix.sass('resources/assets/sass/app.scss', '../resources/assets/css/sass.css');
mix.combine([
'resources/assets/css/custom.css',
'resources/assets/css/sass.css'
], 'public/css/all.css');
然后 npm 运行 开发
所以我有 this css 文件。在 vagrant box 中执行 import style 和 运行 npm run dev 时出现以下错误：
错误编译失败，出现 16 个错误2:54:39AM
These relative modules were not found:
* ../images/img-sp.png in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/1.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/2.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/3.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/cart.png in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/arrow.png in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/12.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/16.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/17.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/21.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/25.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/26.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/27.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/28.jpg in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/star.png in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
* ../images/star1.png in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
Asset Size Chunks Chunk Names
fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad 98 kB [emitted]
fonts/flexslider-icon.eot?9c9cb7a6055043933ba68854f521af45 2.08 kB [emitted]
fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1 20.1 kB [emitted]
fonts/flexslider-icon.svg?10e8a5455c4522c48aa975eacd4f0023 2.33 kB [emitted]
fonts/flexslider-icon.ttf?b4c9e5057989b9727a5df4e0a21af33c 1.89 kB [emitted]
fonts/flexslider-icon.woff?f8b92f66539473eea649c8514eb836a0 1.27 kB [emitted]
fonts/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde 444 kB [emitted] [big]
fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9 166 kB [emitted]
fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713 166 kB [emitted]
fonts/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e 77.2 kB [emitted]
fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760 109 kB [emitted]
fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512 45.4 kB [emitted]
fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158 23.4 kB [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb 18 kB [emitted]
/js/app.js 1.19 MB 0 [emitted] [big] /js/app
mix-manifest.json 32 bytes [emitted]
npm ERR! Linux 4.4.0-51-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script 'node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/vagrant/LaraProjects/golmarket.dev/npm-debug.log
它似乎无法找到或移动您的图片。它们是否被引用自 css，作为背景？可能与此重复：
您的 webpack.mix.js 文件是什么样的？您还需要确保在 webpack.mix.js 中正确引用 css。也许是这样的：
mix.sass('resources/assets/sass/app.scss', '../resources/assets/css/sass.css');
mix.combine([
'resources/assets/css/custom.css',
'resources/assets/css/sass.css'
], 'public/css/all.css');
然后 npm 运行 开发