Laravel：自定义 css 文件的 npm run dev 失败

Posted 2023-02-22

【中文标题】Laravel：自定义 css 文件的 npm run dev 失败

【英文标题】：Laravel: npm run dev fails for custom css file

【发布时间】：2017-11-12 03:19:42

【问题描述】：

所以我有this css 文件。在 vagrant 框中执行 import style 并运行 npm run dev 时出现以下错误：

ERROR 2:54:39 AM 编译失败，出现 16 个错误

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

【参考方案1】：

它似乎无法找到或移动您的图像。他们是从css中引用的，作为背景吗？可能与此重复：

Webpack - sass loader cannot find images

【参考方案2】：

您的 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 运行开发

【讨论】：

这似乎就是你要找的github.com/JeffreyWay/laravel-mix/issues/450