Laravel Mix - 资产编译器和供应商背景图像路径答案

【问题标题】：Laravel Mix - Asset compiler and vendor background image pathsLaravel Mix - 资产编译器和供应商背景图像路径
【发布时间】：2021-11-30 06:59:32
【问题描述】：

Laravel Mix 版本：6.0.34 (npm list --depth=0) ├── @tailwindcss/forms@0.2.1 ├── @tailwindcss/typography@0.4.1 ├── @tarekraafat/autocomplete.js@10.2.6 ├── alpinejs@2.8.2 ├── autoprefixer@10.3.7 ├── axios@0.21.4 ├── flatpickr@4.6.9 ├── laravel-mix@6.0.34 ├── lodash@4.17.21 ├── postcss@8.3.10 ├── postcss-import@12.0.1 ├── quill@1.3.7 ├── resolve-url-loader@4.0.0 ├── sass@1.43.2 ├── sass-loader@12.2.0 ├── tailwindcss@2.2.17 ├── tinymce@5.10.0 └──tippy.js@6.3.2
节点版本（node -v）： v14.17.6
NPM 版本 (npm -v): 6.14.15
操作系统： macOS Big Sur v11.6

说明：

我正在尝试将第 3 方插件添加到我的项目（Laravel 项目）@tarekraafat/autocomplete.js，它有自己的背景图像样式。一切都很好，但是当我在我的样式中包含主插件样式时，我收到了错误消息：

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve 'images/search.svg' in '/path-to-app/resources/css'
...
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
...

这基本上说在供应商文件夹中找不到images/search.svg，实际上图像在那里。我看到在目标图像文件夹中创建了一堆包含该图像的文件夹，例如：public/images/vendor/@tarekraafat/autocomplete.js/dist/css/search.svg。

我的webpack.mix.js：

mix.js('resources/js/app.js', 'public/js');
mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]).options({
    processCssUrls: true,
});
mix.sass('resources/scss/main.scss', 'public/css');

有什么想法吗？

复制步骤：

在resources/css/app.css 中使用@import '@tarekraafat/autocomplete.js/dist/css/autoComplete.css'; 导入供应商样式
在webpack.mix.js 中有processCssUrls: true 选项（如果我将其设置为false，一切正常，但页面上没有图像）
运行npm run prod

【问题讨论】：

标签： webpack laravel-mix

【解决方案1】：

您可以将图像放在样式所在的“资源”文件夹中，并在 css 中使用此路径，在本例中为 /resources/css/app.css。它将编译并将使用的文件传输到公用文件夹。

【讨论】：