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.
Related
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');
I have my assets resources compiled and copied to public directory.
Later, I added few assets, registered them on webpack.mix.js and run npm run dev.
But then I stumbled into some npm error.
So my question is since the compilation is not successful, will the resource files that were previously in public directory be deleted?
Is that possible to completely remove node_modules folder from laravel app and not using it?
My app doesn't require any npm packages and I'm not using echo or pusher or any other API's that requires npm packages, then
Is it OK to remove this unnecessary folder in my app or somehow laravel
needs it to work?
If your project doesn't require node packages then you can remove it, it's not necessary to run Laravel project. But if you're using VueJS, or NodeJS then you need it.
composer update not download node packages, it only installs packages in vendor folder, node_modules is different which includes node packages.
If you want to install node packages, then use npm install command to install it again.
Hope this will helps you!
It is safe to remove the folder. The normal workflow would be to compile all CSS and JS files before deployment and copy them to the public/ directory, rendering the node_modules/ obsolete for deployment.
If anything breaks after you removed it, you can still bring it back with npm install.
node_modules folder is quite large in term of size. I wonder if we can delete it after Laravel Mix compile everything? Sure, I tried it before (install jquery) and then delete node_modules folder after Laravel Mix compiled everything. My jquery code still running and there's no error at all. So is it okay?
yes, you can remove it after run:
npm run production
after run this command all necessary codes will save in app.js
and when need node_modules you can download them again with :
npm install
You should never commit your node_modules folder to git. That would take forever. Just commit package.json and package-lock.json.
However, you wouldn't want to have to re-install them everytime you build your code. I checked a large project and the total size is 310 M. What situation do you have where you can't keep that in place?
To directly answer your question, Laravel will never run code from the node_modules folder, all of the code used from there is compiled into app.js, so it is safe to delete if you had to.
I have downloaded a free HTML theme.
If I open index.html file of the theme in the browser it works perfectly.
However, now I need to integrate this theme in my Laravel Application. If I inspect element in the index.html file loaded in the browser, I can see that some .scss files are getting called.
The scss folder is present in the theme folder but I really don't know how to include this into my project
You can think of SASS as high level css which provides you with more features like making variable and easier css syntax etc ... but since browsers doesn't understands SASS you have to compile SASS into CSS there are multiple ways to do that.
First if your theme folder already has complied SASS (CSS Folder) you can use it if not and want to integrate with Laravel please follow these steps
Copy everything in your SASS Folder and place it in "/resources/assets/sass" so
they can be found by Laravel to be compiled
now you have to compile SASS into css you can use gulp manually or make use of
Laravel mix which is already implemented for you by Laravel
Laravel Ships with packages.json file you will find that in your app root
directory so before being able to compile SASS you have to run npm install in
your root directory (make sure that you have npm and node installed)
after running npm install now you can run either one of these to compile any
sass files you have in "resources/assets/sass"
npm run dev //this will compile one time only
npm run watch //this will automatically watch for any changes and compile
Now your sass files should have been compiled to css you can find the compiled css files in your "public/css" folder.
Hopefully you found this helpful you can read more about this in Laravel docs frontend section specifically Laravel Mix here
Laravel has a file called webpack.mix.js where you edit all frontend assets compilation by calling the mix.js/sass with the respective arguments. It is located at the root of the project.
1- In the resources folders create a new folder and call it scss with a app.scss file. The complete tree will be scss/app.scss
2- Go to the webpack.mix.js and add a new line: mix.sass('resources/sass/app.scss', 'public/css');. The first argument of the method is the source file, and the second is the destination folder.
3- In the app.scss file import all the theme scss files using #import 'file/source';
4- Open terminal/cmd in your Laravel project folder and Run npm run dev/watch to compiled your scss file, and at end your css file result will be located in public/css/app.css.
5- Import the app.css into your Html head section and reload the page. If the styles do not work, press ctrl + f5 to clean browser cache.
The latest version of Laravel utilizes a tool called Vite as a replacement for Laravel Mix.
In order to use Sass with Vite, make sure that Vite and Sass are installed run npm install and npm add -D sass
Make sure you have a sass or scss folder in your projects resources directory, and an scss file inside like app.scss
Make sure that you have configured vite.config.js (which can be found in a new Laravel projects root directory) to include an entry point for sass like so, utilizing the correct path and name for the folder you made:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/scss/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
And in your Blade files add the following, again making sure to use the correct path for the folder you made:
#vite(['resources/scss/app.scss', 'resources/js/app.js'])
Then you can build your sass using Vite by running npm run build