Laravel Mix引入autocomplete.js样式无法解析背景图片路径问题求解

问题根因 #

开启processCssUrls: true后，postcss-import会将@tarekraafat/autocomplete.js的css内容完全合并到resources/css/app.css中，此时css-loader会以app.css所在的/resources/css目录为基准解析样式内的相对路径images/search.svg，无法定位到存放在node_modules目录下的插件原生资源。虽然Laravel Mix会自动把匹配到的资源复制到public的vendor目录下，但编译后的css内引用的路径仍是错误的相对路径，因此抛出资源找不到的报错。

解决方案 #

方案1：单独编译第三方插件样式（最省心，推荐） #

不要在app.css里用@import引入该插件的样式，直接在webpack.mix.js中单独处理插件的css文件，这样路径解析会以插件css自身所在的目录为基准，不会出现路径偏移问题：

1. 先删除resources/css/app.css里的@import '@tarekraafat/autocomplete.js/dist/css/autoComplete.css';代码
2. 修改webpack.mix.js配置，添加单独的css处理规则：

mix.js('resources/js/app.js', 'public/js');
// 单独处理autocomplete插件的样式
mix.postCss('node_modules/@tarekraafat/autocomplete.js/dist/css/autoComplete.css', 'public/css/vendor');
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');

3. 在页面全局布局文件中，在引入app.css之前先引入编译后的插件样式：

<link rel="stylesheet" href="{{ asset('css/vendor/autoComplete.css') }}">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">

方案2：用postcss-url重写资源路径（无需额外引入css文件） #

如果希望把插件样式合并到app.css里，可以安装postcss-url插件重写第三方css内的相对路径：

1. 安装插件：

npm install postcss-url --save-dev

2. 修改webpack.mix.js的postCss配置，添加postcss-url插件并配置路径重写规则：

mix.js('resources/js/app.js', 'public/js');
mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('postcss-url')({
        url: 'rebase',
        basePath: 'node_modules/@tarekraafat/autocomplete.js/dist/css'
    }),
    require('tailwindcss'),
    require('autoprefixer'),
]).options({
    processCssUrls: true,
});
mix.sass('resources/scss/main.scss', 'public/css');

配置后postcss会自动把插件css内的相对路径重写为正确的绝对路径，编译后就能正常加载资源。

方案3：手动复制资源到对应路径（兜底方案） #

如果前两种方案都不适用，可以直接把插件的图片资源复制到css-loader查找的路径下：

1. 在resources/css目录下创建images目录
2. 把node_modules/@tarekraafat/autocomplete.js/dist/css/images/search.svg复制到刚才新建的resources/css/images目录下
3. 重新编译即可正常运行。不过这种方案后续插件升级需要手动同步资源，不推荐长期使用。

内容的提问来源于stack exchange，提问作者Puzo