4

In a fresh Laravel 9 installation, the URL processing from Laravel Mix does not work anymore.

npm outputs the following:

✖ 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

The font file is just one of many. My app.css looks like this:

@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';

The package.json contains the following 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"
    }

The webpack.mix.js is default:

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

Is there something I haven't seen?

2 Answers 2

1

Actually moving the css imports into resources/js/app.js solves this problem. However, this results in the imported css to be included in the public/js/app.js, not the public/css/app.css.

0

The problem occured because of your resources/css/app.css can't render @tailwind import Try to clear resources/css/app.css or chnage the version of installed tailwind and retry, it will work well

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.