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.

Sign up to request clarification or add additional context in comments.

Comments

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

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.