4

我已将laravel-mix更新为版本，并在我使用相对路径包含背景图像4.0.12的行中遇到了损坏的构建*.scss

我得到了下一个文件结构

resources/
|-assets/
||-img/
|||-background.png
||-sass/
|||-footer.scss

我在footer.scss中的代码是下一个

.footer {
  background-image: url(../img/background.png)
}

我的webpack.mix.js是下一个

const mix = require('laravel-mix');

const resourcesAssets = 'resources/assets/';
const dest = 'public/assets/';

mix
  .copy(`${resourcesAssets}images`, `${dest}images`, false)
  .sass(`${resourcesAssets}scss/footer.scss`, `${dest}css`);

在编译期间npm run prod我得到了

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: CSS error
predicate must return an absolute path or the result of calling next()
at file://C:\xampp\htdocs\laravel-project\resources\assets\sass\footer.scss:2:3
at encodeError (C:\xampp\htdocs\laravel-project\node_modules\resolve-url-loader\index.js:218:12)
at onFailure (C:\xampp\htdocs\laravel-project\node_modules\resolve-url-loader\index.js:175:14)
at <anonymous>
    at runMicrotasksCallback (internal/process/next_tick.js:122:5)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)
    at runLoaders (C:\xampp\htdocs\laravel-project\node_modules\webpack\lib\NormalModule.js:301:20)
    at C:\xampp\htdocs\laravel-project\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at C:\xampp\htdocs\laravel-project\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at context.callback (C:\xampp\htdocs\laravel-project\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at onFailure (C:\xampp\htdocs\laravel-project\node_modules\resolve-url-loader\index.js:175:5)
    at <anonymous>
        at runMicrotasksCallback (internal/process/next_tick.js:122:5)
        at _combinedTickCallback (internal/process/next_tick.js:132:7)
        at process._tickCallback (internal/process/next_tick.js:181:9)

        error  in ./resources/assets/sass/footer.scss

我该如何解决这个问题？

4

2 回答 2

6

问题太新了"resolve-url-loader": "^3.0.0"。

"laravel-mix": "~3"前段时间安装中间版本后，它被添加到package.json。

删除它并重新运行构建可以帮助我解决问题。laravel-mix"resolve-url-loader": "2.3.1"运行后添加npm run prod。

于 2018-12-21T20:10:47.763 回答
5

这是 Webpack 中的 URL 重写，因为 Laravel Mix 是建立在 Webpack 之上的。对于 CSS 编译，Webpack 会重写和优化url()样式表中的任何调用。

但是，根据Laravel Docs：

任何给定的绝对路径都url()将被排除在 URL 重写之外。例如，url('/images/thing.png')或url('http://example.com/images/thing.png')不会被修改。

因此，Mix 尝试将您的 CSS 重写为某事。喜欢：

.footer {
    background-image: url(/img/background.png?<some-hash-identifier>)
}

在这种情况下，您可以像这样禁用url()并且 Mix 不会触及url(../img/background.png)您的footer.scss：

mix.sass(`${resourcesAssets}scss/footer.scss`, `${dest}css`);
    .options({
        processCssUrls: false
    });
于 2019-01-23T17:08:29.337 回答