Laravel 使用 css-loader 混合 URL 处理错误

Question

在全新的 Laravel 9 安装中，来自 Laravel Mix 的 URL 处理不再有效。

npm 输出如下：

✖ Mix
  Compiled with some errors in 2.62s

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 './fonts/Inter-Regular.woff' in '/mnt/c/projects/test-project/resources/css'
    at finishWithoutResolve (/mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:304:18)
    at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:381:15
    at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:430:5
    at eval (eval at create (/mnt/c/projects/test-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:430:5
    at eval (eval at create (/mnt/c/projects/test-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
    at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:430:5
    at eval (eval at create (/mnt/c/projects/test-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:430:5
    at processResult (/mnt/c/projects/test-project/node_modules/webpack/lib/NormalModule.js:753:19)
    at /mnt/c/projects/test-project/node_modules/webpack/lib/NormalModule.js:855:5
    at /mnt/c/projects/test-project/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /mnt/c/projects/test-project/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/mnt/c/projects/test-project/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/mnt/c/projects/test-project/node_modules/css-loader/dist/index.js:155:5)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

字体文件只是其中之一。我的 app.css 看起来像这样：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import 'primevue/resources/primevue.css';
@import 'primevue/resources/themes/lara-light-indigo/theme.css';
@import 'primeflex/primeflex.css';
@import 'primeicons/primeicons.css';

package.json 包含以下 dependencies/versions:

    "devDependencies": {
        "@inertiajs/inertia": "^0.10.0",
        "@inertiajs/inertia-vue3": "^0.5.1",
        "@inertiajs/progress": "^0.2.6",
        "@tailwindcss/forms": "^0.4.0",
        "@vue/compiler-sfc": "^3.0.5",
        "autoprefixer": "^10.2.4",
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.2.13",
        "postcss-import": "^14.0.1",
        "tailwindcss": "^3.0.0",
        "vue": "^3.0.5",
        "vue-loader": "^16.1.2"
    },
    "dependencies": {
        "primeflex": "^3.1.2",
        "primeicons": "^5.0.0",
        "primevue": "^3.11.1",
        "vue-i18n": "^9.1.9"
    }

默认webpack.mix.js：

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

有什么我没见过的吗？

Answer 1

实际上将 css 导入移动到 resources/js/app.js 解决了这个问题。但是，这会导致导入的 css 包含在 public/js/app.js 中，而不是 public/css/app.css。

Laravel 使用 css-loader 混合 URL 处理错误

Laravel Mix URL Processing error with css-loader

laravel

webpack

css-loader