Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

tuturu1014's avatar

Your current PostCSS version is 8.2.4, but postcss-import uses 7.0.35

I'm trying to install font-awesome to a freshly created laravel 8 inertia Jetstream. I installed fortawesome but it gives the error:

Unknown error from PostCSS plugin. Your current PostCSS version is 8.2.4, but postcss-import uses 7.0.35. 
Perhaps this is the source of the error below.
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/postcss-loader/dist/cjs.js):
Error: Failed to find '~@fortawesome/fontawesome-free/css/all.min.css'

App.css

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

@import '~@fortawesome/fontawesome-free/css/all.min.css';

Webpack.mix

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

if (mix.inProduction()) {
    mix.version();
}

Webpack.config

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};
0 likes
5 replies
jlrdw's avatar

Make sure to check the package.json files for matching dependencies. Ie.,

quote

  "devDependencies": {
    "ava": "^3.0.0",
    "eslint": "^7.0.0",
    "eslint-config-problems": "^5.0.0",
    "eslint-plugin-prettier": "^3.0.0",
    "postcss": "^8.0.0",           //  <---------------------HERE
    "postcss-scss": "^3.0.0",
    "prettier": "~2.2.0",
    "sugarss": "^3.0.0"
  },

unquote

Just example.

tuturu1014's avatar

The package.json looks like this:

"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.2",
    "@inertiajs/inertia": "^0.8.2",
    "@inertiajs/inertia-vue": "^0.5.4",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.3.0",
    "autoprefixer": "^10.0.2",
    "axios": "^0.21",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "portal-vue": "^2.1.7",
    "postcss": "^8.1.14",
    "postcss-import": "^12.0.1",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.32.5",
    "sass-loader": "^8.0.2",
    "tailwindcss": "^2.0.1",
    "vue": "^2.5.17",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.10"
},

I'm a bit confused because tailwind 2 uses postCss 8.

thinkverse's avatar

Update postcss-import to ^13.0.0 or ^14.0.0, version 12 of postcss-import uses PostCSS 7 not PostCSS 8.

linxlad's avatar

The easiest way to solve this issue without messing about with NPM package versions that are installed by Laravel is to use the JS import instead.

// js/app.js
import './bootstrap';

import 'alpinejs';

// Import through JS and not CSS.
import '@fortawesome/fontawesome-pro/js/all.min';
1 like
nhayder's avatar

did anybody find a solution for this issue ???

Please or to participate in this conversation.