[英]Laravel: npm run dev fails for custom css file
So I have this css file. 所以我有这个 css文件。 On doing
import style
and running npm run dev
within vagrant box I get following error: 在执行
import style
并在无业游民的框内运行npm run dev
,出现以下错误:
ERROR Failed to compile with 16 errors 2:54:39 AM 错误编译失败,出现16个错误:上午2:54:39
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
It looks like it's failing to find or move your images. 好像找不到或移动图像。 Are they being referenced from the css, as backgrounds maybe?
是否从CSS引用了它们,例如背景? May be a duplicate of this:
可能与此重复:
Webpack - sass loader cannot find images Webpack-Sass加载程序找不到图像
What does your webpack.mix.js file look like? 您的webpack.mix.js文件是什么样的? You will also need to to make sure you are referencing the css correctly in the webpack.mix.js.
您还需要确保在webpack.mix.js中正确引用了CSS。 Maybe something like this:
也许是这样的:
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');
then npm run dev 然后npm run dev
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.