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');
Related
I'm using Laravel 5.7 and i'm applying AMP to our website. (https://amp.dev/).
I'm folowing these steps to convert HTML to AMP: https://amp.dev/documentation/guides-and-tutorials/start/converting/?format=websites
One of the requirements is to replace external stylesheets to internal stylesheets (https://amp.dev/documentation/guides-and-tutorials/start/converting/resolving-errors?format=websites#replace-external-stylesheets). I've done this by doing the following code below:
<style amp-custom>
{!! file_get_contents(public_path('css/app.css')) !!}
</style>
I'm using Sass and I'm using Laravel mix to compile my assets.
This is my webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
.version();
But upon doing this I've encountered an error in the AMP:
CSS syntax error in tag 'style amp-custom' - saw invalid at rule '#charset'.
To solve this problem, I must remove the #charset "UTF-8"; in the compiled css css/app.css. And it seems that running npm run dev, its automatically adding #charset "UTF-8"; at the top of the file. How do I remove this?
I'm thinking that I have to add some code in the webpack.mix.js to remove that. But I don't have an idea how to do this.
Yep! SASS adds this directive if your SASS contains any extended (e.g., not standard ASCII) characters. There's an open issue in the SASS project to provide an option to not do this... but they've said they won't provide that option.
For now, it's pretty easy to fix... simply add a step that your build process that hunts for #charset "UTF-8"; and removes it. You can see how I did it here:
https://github.com/ampproject/samples/blob/master/amp-camp/gulpfile.js#L63
gulp.task('styles', function buildStyles() {
const cssEncodingDirective = '#charset "UTF-8";';
return gulp.src(paths.css.src)
... (stuff removed)
.pipe(options.env === 'dev' ? replace(cssEncodingDirective, '') : noop())
... (more stuff removed)
});
If you run 'npm run production', that line will be deleted automatically and you will not get an error in AMP validation.
This is my first experience with Laravel Mix, NodeJS and NPM. I've attempted to follow the documentation from Laravel and believe I am doing it right, but who knows.
I'm attempting to combine several CSS files into one.
webpack.mix.js
mix.combine([
'resources/assets/css/components.css',
'resources/assets/css/plugins.css',
'resources/assets/css/layout.css',
'resources/assets/css/default.css',
'resources/assets/css/custom.css'
], 'public/css/all.css');
if (mix.inProduction()) {
mix.version();
}
Run
npm run dev
It appears to run fine, and outputs the following:
DONE Compiled successfully in 92ms
11:11:33 AM
Built at: 11/23/2018 11:11:33 AM
Asset Size Chunks Chunk Names /css/all.css 0 bytes [emitted] Entrypoint mix = mix.js
The file all.css is created where I expect it to be however it's empty. What am I doing wrong? Thanks!
I belive that combine only works to minify and combine js files. For css you have to use styles
.styles(['inputA.css', 'inputB.css'], 'minified-output.css')
I have not found that in the docs, but I tried it and it works. Credits: https://stackoverflow.com/a/48312321/2311074
I am new in vuejs and I am using vuejs in laravel
this is working and showing component but after making refresh
the page what can I do to see changes with out refreshing page?
these are what I have done
in Webpack:
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue'])
in my html file:
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
commands:
npm run dev
npm run watch
You want to learn how to make single page application (SPA) which does not refresh the page but update the content according to the route.
https://laravel-news.com/using-vue-router-laravel
You will have to learn vue, vue-router to make SPA. when you get some experience then learn Vuex also.
I just had the same issue and struggled for a couple of days, the problem is the webpack mix configuration: this is what worked for me, but take care to remove the host in case you're not working with Laravel Homestead, if you are just leave it as it is and change the proxy value to your site local url.
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css')
.browserSync({
host: '192.168.10.10',
proxy: 'mysite.test',
open: false,
files: [
'app/**/*.php',
'resources/views/**/*.php',
'resources/js/**/*.vue',
'packages/mixdinternet/frontend/src/**/*.php',
'public/js/**/*.js',
'public/css/**/*.css'
],
watchOptions: {
usePolling: true,
interval: 500
}
});
Note: I think it was a sort of a bug in NMP, but the first time I tested this config, it it didn't work. What I did was to remove the polling part, ran
npm watch-poll, stop the watching and then added again the polling settings and ran simply npm run watch and workied like a charm!
EDIT
Btw, there is small issue with this config, you have to save twice for the browser to see the changes
Hope It helps!
-Hugo
You just need to run command into your terminal:
npm install
npm run dev
npm run watch
and will see changes continuously :)
I want to add a carousel plugin into laravel.
https://github.com/OwlCarousel2/OwlCarousel2
so I run npm install --save owl.carouse and add following code into index.blade.php
<script src="/node_modules/owl.carousel/dist/owl.carousel.js"></script>
The owl.carousel.js is inside my project, but when I run npm run watch, and look at the browser, there show an error in the console:
GET http://127.0.0.1:8000/node_modules/owl.carousel/dist/owl.carousel.js 404 (Not Found)
Why is that?
You should not import it through a script tag. Add it in your bootstrap.js file
require('owl.carousel');
require() will use the node_modules as the root dir
You can of course use require in any other .js file that you then import through a script tag.
If you are using VueJs you do at the top of the vue component
import owl from 'owl.carousel'
Your web server does not have access to node_modules directory.
You'd better use gulp to copy and bundle it to public directory.
Or else if you want, you can do it manually. Copy the script to the public directory.
I usually make asset/js directory under the public and then copy owl under it.
You will have:
<script src="/asset/js/owl.carousel/dist/owl.carousel.js"></script>
Add this line in your main .scss file:
#import '~owl.carousel/dist/assets/owl.carousel.css';
Compile the css with npm run dev
You can repeat these steps for your javascript files
Edit:
If you do not make use of Laravel mix yet, read this documentation first. https://laravel.com/docs/5.6/mix
I'm making a simple html and CSS app. I need to my SASS changes to show up on the website LIVE as im developing.
And once all the SASS and development is complete I will run webpack -b and webpack should convert the SASS to CSS.
I'm sure someone has done this before. Thanks.
It looks like the problem stems from wrong output.publicPath config in webpack.config.js file. In order for live-reload to work, requests going to webpack bundles (e.g. app.css, app.js) should be handled by webpack-dev-server. For the repository you're referring to, this could be done by setting output.publicPath to "/build".
Run webpack-dev-server --inline on the command line after changing config file and then go to http://localhost:8080. Now the page should reload everytime you change and save a file.