On a Laravel application, while trying to run:
npm run dev
I get the following message:
npm run dev
dev
npm run development
development
mix
Mix was not set up correctly. Please ensure you import or require laravel-mix in your mix config.
99% done plugins BuildOutputPlugin
node version: v14.18.2
npm version: 8.2.0
No js and css output to public/js and public/css is being produced and I get no other error.
I removed and readded node-modules folder several times..
Any ideas how can I solve this issue pls?
For me, the solution for this error is to insert this line at the top of the webapck.mix.js file:
let mix = require('laravel-mix');
Related
I´m compiling the SASS file with Laravel 8 mix:
// SASS/CSS files
mix.sass('resources/assets/scss/app.scss','public/assets/css')
.sourceMaps(false).version();
However, the .map file is only generated when I run npm run prod. If I run npm run dev, the .map isn´t created. Usually, it should be the other way around. Any idea what´s wrong with the configuration here?
What is the workflow of installing and using any js/css library using npm in laravel 8. What steps should I follow?
For an example let's say I want to install fontawesome using npm and use it in my laravel project. What I know is, once I run the npm install --save #fortawesome/fontawesome-free command it creates a folder for that inside node_modules.
I don't know what should I do after npm install --save #fortawesome/fontawesome-free.
How can I get to know what to do inside resources/css/app.css and webpack.mix.js and what next for any js or css library?
You can use laravel mix, based on my experience the general step to use any css / js package from npm to laravel mix is :
npm install.
import the css needed by the library to resources/sass/app.scss
require js script needed by the library to resource/js/bootstrap.js
npm run development or npm run production to rebuild the app.css and bootstrap.js.
For fontawesome you can read further in this tutorial:
https://dev.to/dendihandian/adding-font-awesome-to-laravel-the-laravel-mix-way-4ndj
My Laravel project is not compiling CSS files. I did a fresh install of Laravel with laravel new project, then I ran npm install and npm run dev.
The result I get is:
DONE Compiled successfully in 7112ms
Asset Size Chunks Chunk Names
/js/app.js 1.6 MiB /js/app [emitted] /js/app
The /css/app.css is missing in the list and app.css is not emitted.
By running npm run watch (or watch-poll/hot), any changes made in app.scss is watched, and the building process is rerun. However, the result is the same - no app.css in the list of compiled files and no app.css generated.
I tried to create a new Laravel project on another computer and running npm run dev on it works without a problem. Both run on Windows 10, node version v10.16.0, npm version 6.9.0.
I tried to completely reinstall Node (to latest 10.16.0) and create a new Laravel project from scratch but with no luck.
So I finaly solved it. The problem was that I have my workspace located on D:\www and symlinked to my C:\Users\ondra\www directory. If I start npm run dev from the original location D:\www\project, everything works OK. Why it is not working from symlinked C:\Users\ondra\www\project is a mistery for me :)
another solution for this is changing the webpack.mix.js file and adding the full path for the scss source files , for example:
mix.js('resources/js/app.js', 'public/js') .sass('/home/ewertonvaz/laravelapp/resources/sass/app.scss', 'public/css');
Note that if you are using Windows you have to remove drive letter reference and the path name must be written with double slash.
I am having some issue, its killing me. please help.
I am trying to run npm in DEV using command: npm run dev
In my webconfig.mix.js : mix.sass('resources/assets/sass/style.scss', 'public/css');
95% emitting
ERROR Failed to compile with 4 errors 05:33:52
This dependency was not found:
* -!../../../node_modules/css-loader/index.js?{"url":true,"sourceMap":false,"importLoaders":1}!../../../node_modules/postcss-loader/lib/index.js??postcss!bootstrap/dist/bootstrap.css in ./node_modules/css-loader?{"url":true,"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"postcss","plugins":[null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root":"/home/vagrant/Code/pudatalk/node_modules"}!./node_modules/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/style.scss
To install it, you can run: npm install --save -!../../../node_modules/css-loader/index.js?{"url":true,"sourceMap":false,"importLoaders":1}!../../../node_modules/postcss-loader/lib/index.js??postcss!bootstrap/dist/bootstrap.css
Please see the error above.
So, i found out that its happening when i import :
#import "~bourbon/app/assets/stylesheets/_bourbon.scss";
and i implemented something like :
.error-bg-img {
background:url("../img/errorbg.jpg");
background-size:cover;
}
I am trying to tell you what i had in the code that occur the problem.
I have been trying google it, reinstall so many things, move things around but hopeless. I am a newbie in sass, webpack, and laravel-mix.
Thanks so much
Alright guys,
I fixed the problem, i didn't now that webpack will automaticly copy the image in /img folder to /public. So i moved my /img from public/ folder to /resources/assests/. And everything is fine now.
Its all about the path. Sorry i am pretty new with webpack and didn't know about that.
#import "bourbon/bourbon";
Have a look at the installation guideline here: https://github.com/thoughtbot/bourbon#requirements
This is my webpack.mix.js file:
let mix = require('laravel-mix');
mix.js(['resources/assets/admin/js/app.js',
'resources/assets/admin/js/core/app.js',
'resources/assets/admin/js/core/libraries/bootstrap.min.js',
'resources/assets/admin/js/core/libraries/jquery.min.js',
], 'public/assets/admin/js/all.js')
.styles(['resources/assets/admin/css/bootstrap.css',
'resources/assets/admin/css/core.css',
'resources/assets/admin/css/components.css',
'resources/assets/admin/css/custom-style.css',
'resources/assets/admin/css/colors.css',
'resources/assets/admin/css/icons/fontawesome/styles.min.css',
'resources/assets/admin/css/icons/icomoon/styles.css',
],
'public/assets/admin/css/all.css').sourceMaps();
I run nmp run watch command and when I edit any js files it recompiles immediately but when I edit css files nothing happens! how can I solve this issue?
Actually scripts() and styles() are being run in background when you run npm run watch. But laravel-mix does not notify about that on terminal.
You can find discussion about this issue here on laravel-mix project from Owner.
May be solution for your issue would be updating the laravel-mix version and check if workaround is implemented for this issue.
Hope it helps you!