Laravel 8 URL 处理

2021-07-17 16:56 更新

因为是基于 Webpack 之上构建，了解几个 Webpack 概念就很重要了。对于 CSS 编译，Webpack 将重写和优化任何带有样式表的 url() 调用。虽然初听上去好像很奇怪，但这确实是个强大的功能。想像一下我们想要编译包含图片相对 URL 的 Sass：

.example {
    background: url('../images/example.png');
}

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

默认情况下，Laravel Mix 和 Webpack 将找到 example.png, 将其复制到 public/images 文件夹，然后重写生成的样式表中的 url()。如此一来，编译后的 CSS 将变成：

.example {
    background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
}

尽管此功能可能很有用，但是已有文件夹结构可能已经按你的预期做了配置。这种情况下，你可以禁用 url() 重写：

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false
    });

在 webpack.mix.js 文件中加入这项配置，Mix 将不再匹配任何 url() 或者复制资源到 public 目录。换句话说，编译后的 CSS 看上去和你原来输入的内容一样：

.example {
    background: url("../images/thing.png");
}

以上内容是否对您有帮助：

推荐文章