How would you get Bootstrap 4 Beta running in a fresh Laravel 5.5 installation? I need to be able to version the style sheets and javascript but i can't seem to get it working.
I figured it out! The process doesn't seem to be well documented so i decided to post it here in case any one else battles with the process!
Once you have created a new project, navigate to your package.json file and remove bootstrap-sass. Once you have done this, delete your node_modules folder.
1) In your terminal run npm install bootstrap#4.0.0-beta --save
2) In your terminal run npm install popper.js --save
3) If needed run npm install to install any other node modules.
4) Navigate to resources/assets/js/bootstrap.js file and make the following changes:
try {
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
require('bootstrap');
} catch (e) {}
5) Open your webpack.mix.js file and add the following:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version();
mix.browserSync('bootstrap.dev');
6) Now if you run npm run watch if you have done everything correctly, your Laravel 5.5 project should now be running with Bootstrap 4 Beta!
Related
I just created a new project with Laravel and Sail. I am noticing that some Tailwind css classes are not loading when I run "sail npm run dev". For example, an element that had the utility "py-5" was not loading. So, I decided to try compiling with Laravel Mix again and it finally worked. Same happened when working with Tailwind css column classes. When I run Mix it always shows it compiled successfully.
Any ideas?
The problem probably results because you want to build tailwindcss once in the container but it is not configured / installed there. Locally it seems to work for you already. Therefore, you should go through the following steps.
Make sure that you are already install tailwind and other dependency via: sail npm install.
Check always if you have postcss anbd autoprefixer installed via sail: sail npm install -D tailwindcss#latest postcss#latest autoprefixer#latest.
Then check your webpack.mix.js file. It have to look like:
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
Add to your css file this three lines:
#tailwind base;
#tailwind components;
#tailwind utilities;
Then run sail npm run dev.
Tailwind has a config option (tailwind.config.js) in what files it will look for the classes used, make sure all the files you use the tailwind class in are part of the content option.
module.exports = {
...
content: [
'./storage/framework/views/*.php',
'./resources/**/*.blade.php',
'./resources/**/*.js',
],
...
}
How can I solve this warning when creating laravel project?
1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
Steps to replicate:
composer create-project --prefer-dist laravel/laravel example
cd example
composer require laravel/ui
php artisan ui vue --auth
npm install vue#next vue-router#next vue-loader#next
npm install
npm run dev
EDIT
From this solution, add these lines to webpack.mix.js
mix.webpackConfig({
stats: {
children: true,
},
});
The above solution creates another warning:
WARNING in ./resources/sass/app.scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-6.use1!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-6.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[4]!./resources/sass/app.scss)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(2423:3) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
Child mini-css-extract-plugin C:\xampp\htdocs\lva\node_modules\css-loader\dist\cjs.js??clonedRuleSet-6.use1!C:\xampp\htdocs\lva\node_modules\postcss-loader\dist\cjs.js??clonedRuleSet-6.use[2]!C:\xampp\htdocs\lva\node_modules\resolve-url-loader\index.js??clonedRuleSet-6.use[3]!C:\xampp\htdocs\lva\node_modules\sass-loader\dist\cjs.js??clonedRuleSet-6.use[4]!C:\xampp\htdocs\lva\resources\sass\app.scss compiled with 1 warning
webpack compiled with 1 warning
How can I solve this?
The color-adjust shorthand is currently deprecated and it depends on the autoprefixer#10.4.6 (source).
I was able to fix this by reverting the autoprefixer package as well as #Benno to version 10.4.5. Run this:
npm install autoprefixer#10.4.5 --save-exact
You probably updated your npm packages. I was able to fix this by reverting the autoprefixer package to version 10.4.5 in the package-lock.json.
when you have problem with autoprefixer maybe because your version autoprefixer. you can add version autoprefixer based problem this version autoprefixer . i have problem on "print-color-adjust" and i add code on my package.json for change my autoprefixer become version "10.4.5"
when you use npm
"overrides": {
"autoprefixer": "10.4.5"
},
Or, when you use yarn
"resolutions": {
"autoprefixer": "10.4.5"
},
Don't forget to delete your package-lock and node_modules , then npm install again.
it work for me (react-bootstrap.v.5)
If you don't want to add additional packages to solve this error, then try this:
Capitalize all the files and Directory name in your components folder
Or you can run this command to install a package if the above solution doesn't work.
npm install autoprefixer#10.4.5 --save-exact
I'm using React with InertiaJS and Laravel as backend, this solution worked in my case.
Thanks
I have the same problem, whenever I hit save an annoying pop-up of error code comes. The simple solution is to add the following code to your webpack.mixjs file :
mix.webpackConfig({
stats: {
children: true,
},});
stop the npm run watch
add a package autoprefixer, add below in terminal:
npm install autoprefixer#10.4.5 --save-exact
run npm run watch and it will not give the error again.
I solved this issue within Laravel by changing the file ./node_modules/bootstrap/scss/forms/_form-check.scss
Line 28 part of the .form-check-input style
change color-adjust: exact; // Keep themed appearance for print
to print-color-adjust: exact; // Keep themed appearance for print
I want to install Vue 3 into a Laravel 8 project, but I don't want to use something like laravel/ui because it adds Bootstrap and a bunch of other stuff I don't want.
I tried npm i vue#next, and it installs Vue 3, but when I try to do import { createApp } from 'vue'; in app.js, etc., I get a bunch of Webpack errors on npm run dev with Laravel Mix ("laravel-mix": "^6.0.6", in package.json).
This is the webpack.mix.js file I'm using:
const mix = require('laravel-mix');
mix
.extract(['vue'])
.js('resources/js/app.js', 'public/js/')
.vue()
.version();
And I get this error when I run npm run dev:
[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
(Stack trace here.)
Does anyone know how to simply install Vue 3 (without a bunch of additional scaffolding) in Laravel 8? Thank you.
After searching more, I found another SO post with essentially the same question and an answer that worked.
Instead of just doing npm i vue#next, I had to do the following instead:
npm i -D laravel-mix#next vue#next #vue/compiler-sfc vue-loader#next
After that, everything worked as expected.
Here's the SO post I referenced: Install vue 3.0 in laravel
I want to install MDB Vue in my fresh Laravel application Im trying to do it via npm but it's not working
I did :
1- created fresh Laravel app
2- Go to the directory www/myApp
3- npm install
4- npm install --save mdbvue
5- npm install --save-dev babel-preset-stage-2
6- I open app.scss
and add:
// Material Design Bootstrap
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#import '~bootstrap/scss/bootstrap';
#import "~mdbvue/build/css/mdb.css";
7- I open ressources/js/bootstrap.js
I add:
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('mdbvue'); // I added this!
} catch (e) {}
it require('mdbvue') I notice a message in the picture:
https://i.imgur.com/IkKvXkb.jpg
I can't post it need more reputations
I keep going I did
8- npm run dev
Everything is green and looking fine but when
I go take MDB buttons in exemple and put themes in my view it's not working
did I missed something ? help please
Your have to add your imports in the app.js file.
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbvue/build/css/mdb.css'
For me it works without the require('mdbvue'); in the bootstrap.js.
But i think the reason you did´nt get an answer for your question is, there are other problems with the integration of mdbvue into the laravel environment.
For example i have not found a way yet to import fontawesome from my npm-installation folder import '#fortawesome/fontawesome-free/css/all.min.css';.
But when i add <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> to my html-head, fontawesome works.
If i find some solutions, i will update this post.
Hope i could help you a bit.
I had the same issue, I could solved it like this:
Cd into your project
Run: npm install
Run: npm install mdbvue
Add the following code to your 'resources/js/app.js' file:
require('./bootstrap');
import '#fortawesome/fontawesome-free/css/all.min.css'
import 'bootstrap-css-only/css/bootstrap.min.css'
import 'mdbvue/lib/css/mdb.min.css'
Add the following code to your 'resources/js/bootstrap.js' file:
require('mdbvue');
Run: npm run dev
It worked for me, using laravel 5.8.35 and the lastest version of MDVUE.
I try to create a custom plugin. Wheni import Image from '#ckeditor/ckeditor5-image/src/image' i get an error
This dependency was not found:
* -!../../../css-loader/index.js??ref--6-oneOf-3-1!../../../postcss- loader/src/index.js??ref--6-oneOf-3-2!./#ckeditor/ckeditor5-theme- lark/theme/mixins/_rwd.css in ./node_modules/css-loader??ref--6-oneOf-3-
1!./node_modules/postcss-loader/src??ref--6-oneOf-3-
2!./node_modules/#ckeditor/ckeditor5-image/theme/textalternativeform.css
To install it, you can run: npm install --save -!../../../css-
loader/index.js??ref--6-oneOf-3-1!../../../postcss-loader/src/index.js??
ref--6-oneOf-3-2!./#ckeditor/ckeditor5-theme-lark/them
How should i fix it? I've installed this package https://github.com/ckeditor/ckeditor5-theme-lark and there is no effect.
Make sure you have created the vue.config.js file and included the details from
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
Make sure #ckeditor/ckeditor5-theme-lark is installed
npm install --save #ckeditor/ckeditor5-theme-lark
That should then fix the issue
after modified the vue.config.js make sure you are re-run again your VUE application
npm run dev
or
npm run serve
In my case, I got same error because I did not follow the guide very well. After read it I had to run this:
npm install #ckeditor/ckeditor5-theme-lark
npm install --save #ckeditor/ckeditor5-vue2 #ckeditor/ckeditor5-dev-webpack-plugin #ckeditor/ckeditor5-dev-utils postcss-loader#4 raw-loader#4
For specific modules selected, something like this:
npm install --save #ckeditor/ckeditor5-basic-styles #ckeditor/ckeditor5-editor-classic #ckeditor/ckeditor5-horizontal-line #ckeditor/ckeditor5-alignment #ckeditor/ckeditor5-autosave #ckeditor/ckeditor5-adapter-ckfinder #ckeditor/ckeditor5-essentials #ckeditor/ckeditor5-font #ckeditor/ckeditor5-heading #ckeditor/ckeditor5-image #ckeditor/ckeditor5-indent #ckeditor/ckeditor5-link #ckeditor/ckeditor5-list #ckeditor/ckeditor5-paragraph #ckeditor/ckeditor5-paste-from-office #ckeditor/ckeditor5-remove-format #ckeditor/ckeditor5-typing #ckeditor/ckeditor5-basic-styles
Then, in my case I use VUE 2+ version, so I had to modify the vue.config.js file, accorging the official documentation: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/vuejs-v2.html
Plase check the documentation with your specific framework: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/overview.html