I'm using the Metronic theme and installed the packages with npm and now a bunch of what I need is in the node_modules folder.
How do I link to these in laravel mix?
Ive tried googling and reading the laravel mix documentation however kind of stuck on this.
The documentation seems to explain how to import (.js and .css) and copy assets (images etc..)
Working With JavaScript: You could amend the example to something like mix.js('node_modules/metronic/src/js/framework/components/general/menu.js', 'public/js');
Working With Stylesheets: Amend this example to something like mix.sass('node_modules/metronic/src/sass/framework/_config.scss', 'public/css');
Copying Files & Directories: Directly from the example mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');
please note the node_modules/metronic/ path is my best guess
Related
I have started my first laravel project after I got a recommendation to use a framework.
I have started watching some tutorials and am trying to follow along, but in all the tutorials there is an assets folder inside resources with for example a _variables file. I don't have this folder, I guess it because I am using laravel version 7x and the tutorials are using an older version? I also thought bootstrap was provided with laravel, but it does not work. Have I done anything wrong or does everything seem right? I have followed a tutorial step-by-step from the start and used npm install & npm run dev, but the css file it creates is empty. I have also tried to start over with a new project, but the same happens!
Any help is appreciated!
Are you already run composer require laravel/ui? Laravel 7 has frontend scaffolding. You can read the documentation's about frontend scaffolding here https://laravel.com/docs/7.x/frontend.
Hope this help.
I'm trying to learn more about package development by using Laravel Nova as a bit of a guide. I'm confused as to how Nova's assets are compiled, and part of that confusion stems from Nova not having a webpack.mix.js but instead a webpack.mix.js.dist.
I'm trying to model this within my package in order to compile and publish my assets for use in my project, but I get npm errors when trying to run any command
Cannot find module 'dir/dir/dir/package/webpack.mix'
I'm unsure as to why it is looking for this file in the first place, but it still seems to be an issue. To get to the root of why this is an issue and how I can fix this, I'd like to know what the difference between webpack.mix.js and webpack.mix.js.dist is.
Any feedback on this would be greatly appreciated. Thank you.
Files that end in '.dist' are generally the default distribution files that come from the package and should not be edited. They will be overwritten on package updates.
You can use them as a reference to add or replace configuration in your primary file(s).
From what I can gather, Laravel Nova creates it's real webpack.mix.js from this file when you activate a certain feature. (It's a paid product, I do not have a license to see it, I can only skim the documents.)
I am not new to Laravel but am new to JavaScript frameworks.
I want to use React in a laravel build but cannot find any information on how to do this.
I have Laravel 5.4. I know this comes pre-packed with Vue and Laravel Mix instead of Gulp.
I am following the tutorial here: https://blog.tighten.co/adding-react-components-to-a-laravel-app but this is not meant for 5.4. It mentions needing to update the gulpfile but, since Laravel 5.4 doesn't use Gulp, there isn't one!
Can someone please help with a small tutorial or a couple of steps that I need to replicate in order to get React working in 5.4?
I have Googled but can only find NPM links, which are less than useful!
Thanks to Joe for pointing out the part of the docs that I needed. There was a little more to it so will describe my steps below to help anyone else out.
Delete the node_modules folder. This isn't necessary for brand new builds but if you have followed any other tutorials and installed things you don't need, this will save a few headaches. If you don't have a node_modules folder, ignore this step.
Please note that the above step will remove anything you have installed using NPM.
Run npm install from your project root. This will install all NPM components used by Laravel.
Open webpack.mix.js and change:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
to
mix.react('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Run npm run dev to compile the Javascript from the lesson contained in the question above. Your React JS outputs should now be working.
(optional) Use npm run watch to compile on the fly.
I really hope this helps someone else out as much as it helped me!
According to the docs, React support is built in to Mix:
Mix can automatically install the Babel plug-ins necessary for React support. To get started, replace your mix.js() call with mix.react():
mix.react('resources/assets/js/app.jsx', 'public/js');
Behind the scenes, Mix will download and include the appropriate babel-preset-react Babel plug-in.
I'm not 100% sure whether or not this'll automatically include React in your output bundle - my guess would be no (in which case you'll have to use a normal mix.js() call to pull it in).
I'm completely new to laravel mix and npm in general so I'm at total loss here.
I'm using jquery plugins such as: https://github.com/noraesae/perfect-scrollbar
Now, I installed laravel mix since I needed laravel echo.
Got that working and running up, but since then the jquery plugins are not loading, all I'm getting is:
Uncaught TypeError: $(...).perfectScrollbar is not a function
I don't know, is this perhaps that the jquery is now loaded async and Mix overwrites the one which I have set up /div> way?
However, I noticed I could perhaps install this plugin via npm due to documentation via:
npm install perfect-scrollbar
I did that, it installed but how can I now possibly include it so that laravel mix loads it as well? I've spent the last 6 hours trying to find a way but I just can't understand how to do this. Any help would be greatly appreciated!
Ok... not sure I get where your problem is but here is a few things you can check...
First, mix will run webpack... wbpack.mix.js ... which will contain something like this if you did not change it:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Now, this will run webpack and compile your resources... in the case we are interested in here, app.js.
Did you include your library (perfect-scrollbar) in app.js as suggested in the perfect scrollbar doc?
var Ps = require('perfect-scrollbar');
You will also need to take care of the css for it as well.. by importing it in your app.scss ... if you are using sass as in the standard laravel install...
#import "node_modules/perfect-scrollbar/src/css/main.scss"
Rebuild and you should be good to go if you use Ps as the perfect-scrollbar object. You can also add it to the window instead... like window.Ps = require...
npm install just installs the package in your node_modules directory. Once there, you must import them into your compiled css and js application file.
Hope this helps.
Anyone doing development with meteor and SCSS. How do you get started, there are no packages for meteorite that i could find that compile .scss files into a specific folder?
Have you tried just compiling the sass/scss into css locally during development? Meteor shouldn't complain if you have your config.rb inside of the client folder along with a sass folder and compiled css folder. It should just automatically read the css per norm. Running $ compass watch inside of this client folder where the config.rb resides is an easy way to automate this css compilation. Telescope is a great sample Meteor app that uses sass in this fashion.
--Alex
Just to get this posted as an answer (was posted as comment); bookcasey posted this sample project as well: https://github.com/gdumitrescu/scoreboard which provides some guidance on how to use sass/scss. Hope it helps.