I see Laravel is getting rid of Elixir with v8.0, so I'm working through changing all of our apps over to Mix.
I am able to successfully mix my js files into all.js, and the scss files are produced and mixed into the final all.css file. My problem is that it simply will not load some of the css files within the style method. npm run is successful - it outputs all files without error. It just doesn't include some of the css files.
I have tried:
Moving the js mix above css. -- no change
Changing the name of the offending css files -- no change
Reducing the offending css files down to almost nothing, just a few lines -- no change
Copy/paste of the offending css files into a single file -- WORKS
But this is a non-solution; if I change the base files, I would have to copy paste each time.
Also seems to indicate that the problem is not with the css???
Elixir handled this perfectly and did all I need to. What am i missing with Mix??
Webpack.js (trimmed):
mix.scripts(['public/js/sweetalert1.js', 'public/js/base.js', 'public/js/jquery.tablesorter.js',
'public/js/jquery.validate.js'], 'public/output/all.js')
.options({
processCssUrls: false
}).version(); // Success
mix.sass('resources/assets/sass/tablesorterColumns.scss', 'public/css/mixed'); // Success
mix.styles([ 'public/css/mixed/base.css', 'public/jquery.tablesorter.css',
'public/css/swal1.css', 'public/css/bootstrap-dropdown-menu.css'], 'public/output/all.css').version();
// Fails reading two files, but Success on output of the others
Everything works except it simply doesn't touch the two files, bootstrap-dropdown-menu.css and swal1.css
Related
I am trying to use #yaireo/tagify in my Laravel 9 project. (https://www.npmjs.com/package/#yaireo/tagify)
I imported it with npm i #yaireo/tagify --save
Then put import Tagify from '#yaireo/tagify' in my app.js file, then ran npm run build on my project.
I can verify the code gets added to the project as it appears in my previously empty app.abc123.js file by looking at the sources within Chrome. The file looks compressed / optimized which I expect to happen.
However, I get this error in the console jquery-3.6.1.min.js:2 Uncaught ReferenceError: Tagify is not defined
I've also tried copying the jQuery.tagify.min.js file to /resources/js/jQuery.tagify.min.js and then using #vite(['resources/js/jQuery.tagify.min.js']) within the blade template, then npm run build to build the files. Again this works, and the file is included in the sources, but the exact same error.
The only way I were able to get it to work without the error was by copying jQuery.tagify.min.js directly to /public/build/assets/jQuery.tagify.min.js and using <script type="text/javascript" src="/build/assets/jQuery.tagify.min.js"></script> in the blade template.
This says to me that vite seems to be doing something when it's trying to compress/optimise the file that breaks the functionality.
I recall running into the same issues with bootstrap and JQuery and ultimately decided to reference the CDN for those files.
This is the raw jQuery.tagify.min.js file: https://pastebin.com/PzK7ps25
This is the file after being processed by vite / npm run build: https://pastebin.com/1FCDXyty
What am I doing wrong?
Edit:
Not that it should have any bearing on the issue, the code I am using within the blade template is:
<input name='basic' value='tag1, tag2, group 3, etc...'>
<script>
$( document ).ready(function() {
// The DOM element you wish to replace with Tagify
var input = document.querySelector('input[name=basic]');
// initialize Tagify on the above input node reference
new Tagify(input)
});
</script>
Here's my webpack.mix.js file:
mix.js('resources/assets/js/app.js', 'public/js')
.combine(['public/js/app.js', 'node_modules/owl.carousel/dist/owl.carousel.js'], 'public/js/app.js');
I am launching js task, then combining all js files into a single one.
When i run npm run dev everything works as expected, but if i run npm run watch and then edit a file that being required in app.js (custom.js) this way:
require('./bootstrap');
require('./custom.js');
Then save the changes, mix is compiling very long, after it finishes my changes not reflected. Am i doing something wrong there?
Loop issue was because i used the same name when combining js files - app.js.
Correct way is not using combine, i've included my owl carousel file in app.js:
require('owl.carousel');
I'm trying to use a theme which I bought from themeforest with Laravel
I have already use mix.copy to move my fonts from node_modules to my public dir, this works fine./
However when I include the following lines in my webpack.mix file,
mix.less('node_modules/elite-theme/eliteadmin-dark/less/style.less', 'public/css', './');
I get the following errors
Any idea what I am doing wrong here?
Never mind seems like this is doing the trick
mix.options({
processCssUrls: false
});
Set to false to take urls as they are
Hi everybody I'm new to learning Gulp and I can't seem to get over this hurdle. I am trying to compile my sass and I will set it to gulp-watch. It will work fine for a little while, but then it will show an error- the file is not found or unreadable.It looks something like:
events.js:154
throw er;// Unhandled 'error' event
Error: app/scss/main.sass
Error: File to import not found or unreadable: layout1
Parent style sheet: stdin on line 2 of stdin
I have tried to look on this site for the solution to my problem and I thought putting the includePaths would work (maybe I'm doing it wrong) but I'm still getting errors. Could someone please help me out?Here are some images of my project. Here is a link to some pictures: http://imgur.com/a/pQBHV
Looks like there are a few issues:
1) You should probably use the scss extension with all your files and update the sass task in your gulp file to watch for changes like so: gulp.src('app/scss/*.scss') or since, in theory, all files contained in that folder should be sass, you could do this instead: gulp.src('app/scss/*') which will watch all the files in the directory.
2) There's also an issue with the names of your sass files. You need to prepend the files you wish to import with an underscore so the compiler knows these files are partials.
So your sass files should look like:
_layout1.scss
main.scss
_normalize.scss
_styles.scss
And import the partials in main.scss:
#import 'normalize';
#import 'layout1';
#import 'styles';
More info http://sass-lang.com/guide#topic-4
I have my Bower vendor directory at resources/assets/vendor.
In my gulpfile, I've tried the following:
mix.scripts([
"vendor/jquery/dist/jquery.min.js"
], "public/js");
When I run gulp in terminal, it doesn't seem to do anything. No errors though.
I also tried this:
mix.copy('vendor/jquery/dist/jquery.min.js', 'public/js/jquery.js');
To no avail.
What am I missing?
update & solution
Only sass,less and coffee scripts are by default looked for in resources/assets/[sass/coffee/less] while JS files are simply in resources/js which confused me. Beware.
First of all, we don't know location of your jquery.min.js file. However the default location for scripts files is resources/js so to make it work, you should have your jquery.min.js file in resources/js/vendor/jquery/dist/jquery.min.js.
As 2nd argument you should pass your target filename with path, so it should be for example:
mix.scripts([
"vendor/jquery/dist/jquery.min.js"
], "public/js/jquery.min.js");
assuming as I mentioned at the beginning you have this JS file in resources/js/vendor/jquery/dist/jquery.min.js location
If you don't, you should use 3rd parameter. So in this case, if your JS file is really in "vendor/jquery/dist/jquery.min.js" location, you could use:
mix.scripts([
"jquery.min.js"
], "public/js/jquery.min.js", "vendor/jquery/dist");
to make it work.
EDIT
After explaining in comments, you should use then:
mix.scripts([
"vendor/jquery/dist/jquery.min.js"
], "public/js/jquery.min.js", "resources/assets/js");