I'm trying to add Font Awesome to newly installed Laravel 8 Jetstream with Inertia but receiving the following 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: Failed to find '~#fortawesome/fontawesome-free/scss/brands'
App.css
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
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'),
},
},
};
First, set up
webpack.mix.js as follows:
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.sass('resources/sass/app.scss', 'public/css');
if (mix.inProduction()) {
mix.version();
}
2.- Go ahead and install fontawesome:
npm install --save #fortawesome/fontawesome-free
3.- Create a new file "resources/sass/app.scss" and include the following:
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/brands';
4.- Execute the following commands:
npm install && npm run dev
and again
npm run dev
.
Steps
Before triggering Laravel Mix, we want Node.js and NPM installed on your machine.
node -v
npm -v
Install Node dependencies for Laravel Mix, Webpack, Autoprefixer, and PostCSS.
npm install autoprefixer#latest && npm install laravel-mix#latest && npm install postcss#latest && npm install webpack#latest --save-dev
Install the latest free version of Font Awesome via the npm package manager.
npm install #fortawesome/fontawesome-free --save-dev
Next, build your webpack.mix.js configuration. Please note that the default Laravel 8 install no longer uses SASS (as we did in previous Laravel versions) to compile our CSS assets.
const mix = require('laravel-mix');
mix.setPublicPath('public')
mix.setResourceRoot('../');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
The following dependency entry should now be in
your package.json.
// Font Awesome
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
In /resources/css/app.css, import one or more styles depending on which icon set you are interested in using.
#import '~#fortawesome/fontawesome-free/css/fontawesome';
#import '~#fortawesome/fontawesome-free/css/regular';
#import '~#fortawesome/fontawesome-free/css/solid';
#import '~#fortawesome/fontawesome-free/css/brands';
Now, we want to update our package.json to use the new Mix CLI. Please change the "scripts" section of package.json to the following.
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
Compile your assets and produce a minified, production-ready build.
npx mix -p
OR
npm run prod
Finally, reference your generated CSS file in your Blade template/layout.
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
Happy Mixing!
I have it working by running: npm install font-awesome --save
I created resources/sass/custom.scss and added .sass('resources/sass/custom.scss', 'public/css'); to
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'))
.sass('resources/sass/custom.scss', 'public/css');
in webpack.mix.js.
Then adding #import "node_modules/font-awesome/scss/font-awesome.scss"; to resources/sass/custom.scss.
After running npm run watch font awesome was available.
I know this is old but for anyone else this is my process; Laravel 8 framework, Webpack, Laravel Mix.
In my webpack.mix.js file I use the following:
if (mix.inProduction()) {
mix.copy('node_modules/#fortawesome/fontawesome-free/webfonts', 'public/fonts/font-awesome');
}
I then run this once before I start development:
npm run production
This copies all font awesome files to the public folder and ensures they are not copied during development.
Then, depending on where you copy your font awesome files to, you need to set the following just before importing font awesome within your main .scss file:
$fa-font-path: "/fonts/font-awesome/";
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
Note - if you don't do this, the default font awesome public path referenced in your compiled .css file will be ../webfonts/ and cannot be loaded by your .css file.
I have this same exact problem, I found this question by searching for the solution, but none of the answers here worked.
Somehow, I've just managed to solve this, though I'm afraid it's a rather dirty solution. Perhaps someone with more knowledge of Mix can clean it up.
Here's what I've done in my webpack.mix.js file to fix this:
/*
* slow compile fix: https://github.com/tailwindlabs/tailwindcss/discussions/1514#discussioncomment-51903
*/
const mix = require('laravel-mix');
mix.js(
'resources/js/app.js',
'public/js'
)
.postCss(
'resources/css/tailwind.css',
'public/build/css',
[
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
)
.postCss(
'node_modules/#fortawesome/fontawesome-free/css/all.css',
'public/build/css',
[
require('postcss-import'),
require('autoprefixer'),
]
)
.postCss(
'resources/css/main.css',
'public/build/css',
[
require('postcss-import'),
require('autoprefixer'),
]
)
.combine(
[
`public/build/css/all.css`,
`public/build/css/tailwind.css`,
`public/build/css/main.css`,
],
`public/css/app.css`
)
Check the spelling of fontawesome.
#import '~#fontawesome/fortawesome-free/scss/brands';
#import '~#fontawesome/fortawesome-free/scss/regular';
#import '~#fontawesome/fortawesome-free/scss/solid';
#import '~#fontawesome/fortawesome-free/scss/fontawesome';
Related
I'm working on a project that I'm taking over and trying to learn everything that's being used in it. I currently need to add an NPM package (slick-carousel) to the project, and I want to add it to the mix.
I installed the package by running npm install slick-carousel and can see it in my node_modules. Now I need to add them to my webpack mix, so I bundle them with everything else, but I'm not 100% on how to do it. I'm relatively new to NPM and a novice with Webpack, so this stumped me slightly.
Below is my webpack.mix file and my failed attempt.
const mix = require('laravel-mix');
mix.js('resources/js/secret-app.js', 'public/js')
.postCss('resources/css/secret-app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
if (mix.inProduction()) {
mix.version();
}
I tried adding the following:
const mix = require('laravel-mix');
mix.js('resources/js/secret-app.js', 'public/js',
[
require('slick-carousel')
])
.postCss('resources/css/secret-app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
require('slick-carousel')
]);
if (mix.inProduction()) {
mix.version();
}
Doing this and running npm run dev results in an error:
ReferenceError: window is not defined
at...
I would appreciate it if someone would tell me the correct way to implement the package :)
I'm trying to install Tailwind CSS v2.0 into a clean Laravel install, but it is not installing complete css properties like .p-2 and other properties i am following official installation https://tailwindcss.com/docs/guides/laravel but still it is not
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
]);
tailwind.config.js
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
\resources\css\app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
Recently Tailwindcss update their framework(v3.0.7) in which css file is download in purgecss(https://purgecss.com/), thats why you cant download all the classes and properties of tailwindcss.
For that what you can do is download downgraded version of tailwindcss you can download it in your custom folder not even in Laravel.
first, run laravel new your_project_name in your terminal,
run npm install or npm i on your terminal
run cd/your_project_name in your terminal
run npm install -D tailwindcss#^1.9.2 in your terminal
then go to your project folder and open it on vs code or any code editor
add below code in you
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
]);
add below code in resources\css\app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
last run npm run dev in your cmd
Thank you.
Check to see that you're not running npm run prod as this purges your css files and removes unused styles.
Run npm run dev and see if that helps.
I did everything exactly as in this video https://www.youtube.com/watch?v=UHSipe7pSac
but I got this error i cmd :(
"ERROR in ./resources/js/app.js 4:0-28
Module not found: Error: Can't resolve './vue/app' in 'D:\osp\domains\laravel-todolist\resources\js'
webpack compiled with 1 error" and error in browser console "Uncaught Error: Cannot find module './vue/app'".
Here is my short overview video with my code https://www.youtube.com/watch?v=zZqYJaIgau4
I created folder /vue/ in /resources/js/ folder and put here file 'app.vue' with code
<template><div>Hello</div></template> <script>export default {}</script>
Then in /resources/js/app.js file I'm importing Vue instance and my template file.
require('./bootstrap');
import Vue from 'vue';
import App from './vue/app';
const app = new Vue({
el: '#app',
components: { App }
})
Please help understand where is the problem :(
You're probably using Vue3 with Laravel Mix 6 so, in short, in your webpack.mix.js, instead of this:
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
Use this:
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
I had a similar issue from the same tutorial and tried the solution here but my error was still not resolved.
this is what I did. I used - 1.
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
I install npm again with npm install because I was told some packages weren't installed.
I install vue again with npm install vue,
I did npm run dev and finally npm run watch.
Delete the node_modules folder in your project folder.
Delete the npm and npm-cache folders in the C:\Users\AppData\Roaming and the C:\Users\AppData\Local paths.
Reinstall the node modules afresh using npm install
Install the Vue package npm install vue. In the webpack.mix.js file replace this (since it is mix version 6.0)
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
with
<code>mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
Run npm run hot. The error should be gone.
Replace
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
by
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
Run the below in the command prompt
npm i vue-loader
In my webpack.mix.js file i replaced this
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
with this
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
But i was still getting errors when i run npm run dev or npm run watch
after hours of searching it turned out i was using vue-loader 17 with Vue 2. If you want to use Vue 2 the latest supported version of vue-loader is 15, vue-loader 16 and up is purely made for Vue 3. I downgraded to vue-loader 15.9.8 and everything runs green.
I try to use SweetAlert with Laravel 5.5 usin Larvel Mix, but not work properly
webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.copy('node_modules/sweetalert/dist', 'public/js');
package.json
"devDependencies": {
...
"bootstrap-sass": "^3.3.7",
...
"jquery": "^3.2",
"laravel-mix": "^1.0",
"sweetalert": "^2.0.8",
resource/assets/sass/app.css
// Sweet Alert
#import url("https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css");
when I execute npm run dev compiling without any errors.
But when I use with this method, alerts show without CSS style of SweetAlert.
After
npm install sweetalert2 --save
you should do like below in your app.js:
window.Swal = require('sweetalert2');
Or
#import "~sweetalert2";
In your resources/assets/sass/app.scss file,
Use this line instead
#import "~sweetalert2";
What you were doing (importing the CSS from a CDN) has nothing to do with npm at all.
Step 1: npm install sweetalert --save run this command in your terminal/cmd.
Step 2: In your resources/js/app.js file, simply import it into your application import swal from 'sweetalert';
I want use sparksuite/simplemde-markdown-editor in Laravel Mix compiling.
I have add this line in app.scss:
#import "node_modules/simplemde/dist/simplemde.min.css";
and this line in app.js:
window.SimpleMDE = require('simplemde');
I want compiling this plugin in my project...
/* in webpack.mix.js file add following lines at the end */
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
After adding Run below command in terminal
npm run dev
(or)
npm run watch