使用 css-loader 的 Laravel Mix URL 处理错误答案

【问题标题】：Laravel Mix URL Processing error with css-loader使用 css-loader 的 Laravel Mix URL 处理错误
【发布时间】：2022-07-04 06:06:18
【问题描述】：

在全新的 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 包含以下依赖项/版本：

    "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'));

有什么我没见过的吗？

【问题讨论】：

标签： laravel webpack css-loader

【解决方案1】：

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

【讨论】：

【解决方案2】：

由于您的resources/css/app.css 无法渲染@tailwind 导入而出现问题尝试清除resources/css/app.css或更改安装的tailwind版本并重试，它会正常工作

【讨论】：