Laravel mix unable to resolve aliased files from webpack.config.js - laravel

I've been trying to fix this for the last 2hrs now.
The thing, is I have upgraded to laravel 5.8 from 5.7. I had defined an alias
resolve: {
alias: {
"~": path.resolve(__dirname, "resources/js"),
}
}
but now, after the upgrade, laravel mix can't resolve any of the files with this alias.
I am using phpstorm idea though, I have linked webpack.config.js with phpstorm and works just file but this is not compiling with laravel mix.
I have:
removed node-modules and reinstalled again
removed package-lock.json
npm cache --clear --force
installed yarn tried with it nothing
installed babel-loader and vue-loaders nothing still
had installed some eslint-import-resolver-alias
Done all the above and still gets the error:

Actually found my issue: I hadn't somehow, I had deleted the import on webpack.config.js in webpack.mix.js

Related

Mix was not set up correctly. Please ensure you import or require laravel-mix in your mix config / Laravel Mix v6.0.39

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

Laravel Mix does not emit css

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.

Laravel Nova: Build Components

First post.
I'm currently building a Laravel Nova application. I'm making changes to the dashboard component - more specifically the file within the "resources/js/views/Dashboard.vue".
I'm struggling to build the component - does anyone know how to build the component? I have some code which runs webpack.mix to build my JS and SCSS files, but I'm pretty sure it doesn't include the files within the Laravel Nova instance.
Any help will be great.
EXTRA:
I've already tried run the webpack command to build from inside the Laravel Nova instance but it errors out.
UPDATE
I found renaming my webpack.mix.js.dist to webpack.mix.js, running npm run dev whilst within the ./nova directory worked... but only after running php artisan nova:publish
I've wrote a command to compile all these steps but do I have to run php artisan nova:publish everytime, just seems...tedious?
By default, Nova's JavaScript is compiled for production. As such, you will not be able to access the Vue DevTools out of the box without compiling Nova's JavaScript for development. To accomplish this, you may use the following terminal commands from the root of your Nova project:
cd ./vendor/laravel/nova
mv webpack.mix.js.dist webpack.mix.js
npm install
npm run dev
rm -rf node_modules
cd -
php artisan nova:publish
Details: https://nova.laravel.com/docs/2.0/customization/frontend.html#vue-devtools

Can not run npm using Laravel-mix

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

Setup Zurb Foundation 6 (sass) in Laravel 5 using composer

I am starting a new Laravel project with v5.2 and I would like to use Zurb Foundation v6.2.
I've seen that Zurb Foundation can be installed through composer and since I've installed Laravel through composer, I thought it as a good idea.
I did it, Foundation is in the vendor (vendor/zurb/foundation) folder.
It has also been added to the composer.json:
"require": {
"php": ">=5.5.9",
"laravel/framework": "5.2.*",
"zurb/foundation": "^6.1"
},
But now, how can I use it? Where should I create my css file(s)? In the resources/assets/sass folder where Laravel already provides a scss file (app.scss)? If so, how can I link it to Zurb Foundation?
Thanks a lot for your help.
I think Laravel Elixir is more suitable for this purpose.
From the guide:
Installing Node
Before triggering Elixir, you must first ensure that Node.js is installed on your machine.
node -v
By default, Laravel Homestead includes everything you need; however, if you aren't using Vagrant, then you can easily install Node by visiting their download page. Don't worry, it's quick and easy!
Gulp
Next, you'll want to pull in Gulp as a global NPM package like so:
npm install --global gulp
Laravel Elixir
The only remaining step is to install Elixir! With a new install of Laravel, you'll find a package.json file in the root. Think of this like your composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:
npm install
Then to install Foundation 6 for Sites it's recommended to use Bower, (another) package manager, but specifically for managing frontend facing libraries like Foundation and jQuery.
You can have a look at Zurb's example template for better understanding.
npm install --global bower
Create a file named bower.json:
{
"name": "my-site",
"dependencies": {
"foundation-sites": "~6.1.2",
"motion-ui": "~1.1.0",
"foundation-sites": "~6.2.0",
"motion-ui": "~1.2.2"
},
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"private": true
}
Then run bower install.
In app.scss, import Foundation:
#import 'foundation';
#include foundation-everything;
Then in gulpfile.js, compile it to CSS:
mix.sass('app.scss', 'public/css/app.css', {
includePaths: [
'bower_components/foundation-sites/scss/'
]
});
Finally to compile, run:
gulp
I think npm way is better suited for front-end stuffs. Take a look at this:
http://somethingnewtutorial.blogspot.com/2017/07/using-foundation-6-with-laravel-5.html
If you are using earlier version, its just using gulp instead of laravel-mix.

Resources