使用css-加载程序的Laravel处理错误

Question

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

国家预防机制的产出如下：

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

有什么我没看到的吗？

Answer 1

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

Answer 2

由于您的resources/css/app.css无法呈现@tailwind导入，尝试清除已安装的顺风版本的resources/css/app.css或吨位并重试，因此出现问题，它将运行良好