Only recently jumped on to the Laravel and Bootstrap 4 bandwagons, alas I have got Laravel 5.5 running with Bootstrap 4.0 no problem.
Sooo, I have getbootstrap.com Dashboard theme but I'm unclear on how to compile the themes assets and dependancies, i.e. what do I do with the gulpfile.js and package.json?
Note: I am using Laravel 5.5.34 and Bootstrap 4.0.0. I would rather learn how to compile assets using Laravel Mix and migrate from Gulp to Webpack, than simply copy the dist CSS to the public directory or link to the CDN in blade templates.
I was going through the same dilemma and this answer from Jeffrey Way has helped me.
I have created a css folder in resources/assets folder ( now it looks like resources/assets/css ). I copied all the css files that came with the theme to this folder.
And i updated the webpack.mix.js file in the root of the application
mix.js('resources/assets/js/app.js', 'public/js')
mix.styles([
'resources/assets/css/app.min.css',
'resources/assets/css/primary.css',
'resources/assets/css/style.css'
], 'public/css/app.css');
Now when i run npm run dev all the css is compiled into a single file in pubilc/css/app.css and js in public/js/app.js
Note: My theme also came with a js file which is named app.min.js
So i inluded it in public/js/app.min.js as the main compiled file name is app.js. If your theme has a file app.js rename it to theme.js and place in the public/js folder.
You can call these the normal way you do after compiling them with {{asset('css/app.css') }}
Related
I'm new to webpack in Laravel. I already managed to compile the default scripts into one. However, when I tried to add a new Vue Controller in a separate folder, it seems it will not be included during npm run dev.
Currently I have this set-up
-assets
--js
---app.js
---test.vue
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/test.vue'
], 'public/js/app.js');
This will work. However when I put test.vue inside a folder.
-assets
--js
---app.js
--controllers
--test.vue
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/controllers/test.vue'
], 'public/js/app.js');
However, when I changed it from test.vue to test.js it will compile. Does the file extension matter? when compiling mix.js?
Can someone help me out on this? Thanks!
If i am not mistaken you can't compile single .vue files using webpack without some sort of loader
Using Vue.component() and importing a vue file into a .js file and then compiling the .js will work.
This might be of help: https://github.com/vuejs/vue-loader
Vue Single-File Component (SFC) Spec
A *.vue file is a custom file format that uses HTML-like syntax to
describe a Vue component. Each *.vue file consists of three types of
top-level language blocks: , , and , and
optionally additional custom blocks:
vue-loader will parse the file, extract each language block, pipe them
through other loaders if necessary, and finally assemble them back
into an ES Module whose default export is a Vue.js component options
object.
How do I combine all of my js files to a single file with laravel mix? and is it a good practice to directly keep the downloaded external plugins js files and CSS files in public directory? because we have a js folder already in resource folder and it's getting compiled and saved in public directory when we do npm run production, not sure if this is correct or not.
This is how my resource folder looks like :
And my app.js file looks like this :
You can include those libraries by installing them to NPM with npm install jquery for instance. Then in your bootstrap.js file you would have something like:
window.jQuery = window.$ = require('jquery');
That would make it available in the window, and then you still have just one js file to include on the client (your compiled app.js file).
If you do have a file you want separate from your main bundle, and it isn't one you have pulled in through NPM, it's not a bad thing to commit it straight to the public folder. I would keep them in /resources/assets/js/vendor and then use mix.copy to move them into /public/js/vendor. Thats just because I prefer all of my work to be in resources and to have public be all compiled or copied files.
you can add them from npm , or if these are external plugins like my case you can do this
mix.js('resources/assets/js/app.js', 'public/js')
.scripts([
"path/plugin1.js",
"path/plugin2.js",
.......
], 'public/js/all.js').styles([
"path/plugin1.css",
"path/plugin2.css",
.....
],'public/css/all.css');
for more useful information you can visit : https://laravel.com/docs/5.6/mix
You can use npm to install jquery and do it like this same with jeff
window.$ = require('jquery');
OR but if you have your own script want to include then
just put it top on vue instance
require('./jquery.js') //based on your picture it jquery and app.js are in same level
window.vue = require('Vue')
this will automatically read and being compiled by the npm.
I am wondering in how I should include my npm packages into my HTML. I have added "slidebars": "2.0.2" to my package.json. After that, I ran npm install. So far so good.
Now, I am new with both Laravel and npm. I am trying to use the "mix" feature provided in Laravel like this:
mix
.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version();
Does that automatically compile all the packages provided in the package.json into the single app.js + app.css? Or do I manually need to import the CSS + JS from the slidebars-plugin, like: <link href="/node_modules/slidebars/dist/slidebars.css" rel="stylesheet">?
For the css, the easiest way would to copy your css files to resources/assets/ and then link it to your app.scss like this:
#import "package.scss"
As for the JS, you can combine your vendor JS files into one and copy them to the public directory like this
mix.js([
'node_modules/package/dist/package.min.js',
'node_modules/package2/dist/package2.min.js',
'node_modules/package3/dist/package3.min.js',
], 'public/js/vendors.js');
Then in your view, you just include /js/vendors.js
I have this test Wordpress site http://test.fluxmusic.net/ and I have my css and js file working, but I can't find how to make scss files work.
SCSS files must be compiled to css first before enqueuing them. You will need to install a plugin like:
https://wordpress.org/plugins/wp-scss/
Hope this helps
I wanted today to try scss support of yeoman.
I followed the procedure :
$ yo angular
include Twitter Bootstrap? Yes
use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? Yes
$ grunt server
And then the default view load but without style formatting. In the console I can see that it cannot find /styles/main.css file.
I have seen that compass put the file in .tmp/styles/main.css, so I tried to change it in index.html. But the same. Moreover there is no .tmp directory in my project folder.
So I ran "grunt build" and loaded the index.html in dist directory in a MAMP server. Same, no css formatting, moreover no error in the console
You shouldn't be putting the '.tmp' path anywhere in your index.html, it should be left pointing to 'styles/main.css' like so:
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
You should also have your actual style file at 'app/styles/main.scss', which Yeoman should have created for you. When you run 'grunt server' it uses compass to compile all the scss files into a single css file which it temporarily puts under '.tmp', but as long as your scss files are in place you should not need to worry about this. My guess would be that you've somehow deleted or renamed the main.scss file; you should not be renaming this to 'main.css' for example.
I had the same issue, your main.scss file has issues with bootstrap css
I deleted the line ( 2. line )
#import 'bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
and have no more issues. it compiles to main.css