Question

我已将 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

如何解决此问题？

Answer 1

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

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

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

Answer 2

这是Webpack中的URL重写，因为Laravel Mix构建在Webpack之上。对于CSS编译，Webpack重写并优化样式表中的所有CorM <- matrix(nrow = 9, ncol = 9) CorM[upper.tri(CorM, diag = TRUE)] <- c(0, 1, 0.125, 0, 0.875, 0.250, 0, 0, 0.750, 0.375, 0, 0, 0, 0.625, 0.500, rep(0, 4), 0.500, 0.625, rep(0, 5), 0.375, 0.750, rep(0, 6), 0.250, 0.875, rep(0, 7), 0.125, 1.00 ) CorM[lower.tri(CorM, diag = FALSE)] <- c(rep(0, 36)) CorM [,1] [,2] [,3] [,4] [,5] [,6] [,7] [,8] [,9] [1,] 0 1.000 0.000 0.000 0.000 0.000 0.000 0.000 0.000 [2,] 0 0.125 0.875 0.000 0.000 0.000 0.000 0.000 0.000 [3,] 0 0.000 0.250 0.750 0.000 0.000 0.000 0.000 0.000 [4,] 0 0.000 0.000 0.375 0.625 0.000 0.000 0.000 0.000 [5,] 0 0.000 0.000 0.000 0.500 0.500 0.000 0.000 0.000 [6,] 0 0.000 0.000 0.000 0.000 0.625 0.375 0.000 0.000 [7,] 0 0.000 0.000 0.000 0.000 0.000 0.750 0.250 0.000 [8,] 0 0.000 0.000 0.000 0.000 0.000 0.000 0.875 0.125 [9,] 0 0.000 0.000 0.000 0.000 0.000 0.000 0.000 1.000调用。

但是，根据Laravel Docs：

任何给定url()的绝对路径都将从URL重写中排除。例如，url()或url('/images/thing.png')不会被修改。

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

url('http://example.com/images/thing.png')

在这种情况下，您可以像这样禁用.footer { background-image: url(/img/background.png?<some-hash-identifier>) }，并且Mix不会触摸 footer.scss 中的url()：

url(../img/background.png)

通过相对路径包含图像的正确方法

2 个答案: