i'm currently use laravel 5.6 with an old version of bootstrap.
in the bootstrap.min.css i have this line:
/! Bootstrap v2.3.0** Copyright 2012 Twitter, Inc*
also bootstrap-responsive telling me
Bootstrap Responsive v2.3.0
how can I update the bootstrap version from 2 to 4?
Step 1 — Remove existing bootstrap
Uninstall Bootstrap
npm uninstall --save-dev bootstrap-sass
Step 2 — Install Bootstrap 4
Install Bootstrap 4 beta and popperjs
npm install --save-dev bootstrap#^4.0.0-beta.2 popper.js
Step 3 — Update code references
In resources/assets/js/bootstrap.js replace
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
with
try {
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
require('bootstrap');
} catch (e) {}
In resources/assets/sass/app.scss replace
#import “~bootstrap-sass/assets/stylesheets/bootstrap”
with
#import “~bootstrap/scss/bootstrap.scss”
In resources/assets/sass/_variable.scss replace
$font-size-base: 14px;
with
$font-size-base: 0.875rem;
Step 4 — Recompile Assets
Run
npm run dev
Now you have removed all Bootstrap 3 references and installed Bootstrap 4
Related
I'm trying to use the DataTables plugin that's included in Admin-LTE 3 (Bootstrap 4) but it seems that the plugin is not found.
The page currently looks like:
But I want it to look as:
Everything else looks "ok" and as it should, for example clicking on the pages or sorting but the styles are bot being substituted for Bootstrap 4.
So it appears that the bootstrap.datatables is never added to the main plugin:
Currently my webpack.mix.js looks like:
mix.js('resources/js/app.js', 'public/assets/js')
.sass('resources/sass/app.scss', 'public/assets/css')
.version();
And inside app.js it has:
// Import and set jQuery
global.$ = global.jQuery = require('jquery');
// Import bootstrap
require('bootstrap');
// Import datatables
require('admin-lte/plugins/datatables/jquery.dataTables');
require('admin-lte/plugins/datatables/dataTables.bootstrap4');
// Import admin-lte-3
require('admin-lte');
and on app.scss I have:
// Import Google Font: Source Sans Pro
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700');
// Import datatatables
#import '~admin-lte/plugins/datatables/dataTables.bootstrap4';
// Import admin-lte-3
#import '~admin-lte/dist/css/adminlte.css';
Any ideas?
You have the file paths wrong.
In order to import the DataTables plugin correctly, you should have:
// JS
require("admin-lte/plugins/datatables/jquery.dataTables");
require("admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4");
// CSS
#import "~admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4";
Remove this
require('admin-lte/plugins/datatables/dataTables.bootstrap4.css');
from your app.js
then add the file in your style resources/scss/app.scss like this
#import '~admin-lte/plugins/datatables/dataTables.bootstrap4';
I'm building an API interface in VueJS alongside Vuetify in a Laravel package. As per Vuetify docs, I've created a main.styl file containing the main theme stylus file (~vuetify/src/stylus/theme), my overrides and the include of the app file (~vuetify/src/stylus/main.styl) in that order. This should add my colour overrides, however this does not happen.
The stylus file is as follows:
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
#import "~vuetify/src/stylus/theme"
$material-theme.primary = #0078ff
$material-theme.secondary = #00437b
$material-theme.accent = #ee202e
$material-theme.background = #1a1a1a
$material-theme.bg-color = #1a1a1a
$material-theme.cards = #1a1a1a
$material-theme.picker.body = #1a1a1a
#import '~vuetify/src/stylus/main'
And my webpack.mix.js like so:
const path = require('path')
const mix = require('laravel-mix')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
mix.setPublicPath(path.normalize('public'))
mix.webpackConfig({
output: {
path: path.resolve(__dirname, 'public'),
publicPath: 'vendor/my-package-name/'
},
plugins: [
new VuetifyLoaderPlugin()
],
resolve: { ... }
})
mix.stylus('resources/stylus/vuetify.styl', 'public/css')
mix.js('resources/js/app.js', 'public/js/app.js')
I've tried setting the (in the example set to) $material-theme variable to $material-dark and $theme as well, and neither did not work...
I have made sure to install the whole stylus plugin and such, and yarn does not complain at all when compiling the stylesheet (and it does if I purposely cause an error). However the compiled stylesheet does not contain my changed theme variables. Still, my customisations don't apply at all. The CSS file does not contain my custom colour codes and such.
Does anyone have any idea why this isn't working properly?
I also use Laravel, vue and vuetify framework and the entire process to override your default vuetify variables is quite easy if your understand the setup, in fact you seem to only complicate it with many unnecessary configuration. I rather use npm not yarn but that should make no difference.
So, I would rather do this:
main.styl file looking like:
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
$material-theme.primary = #0078ff
$material-theme.secondary = #00437b
$material-theme.accent = #ee202e
$material-theme.background = #1a1a1a
$material-theme.bg-color = #1a1a1a
$material-theme.cards = #1a1a1a
$material-theme.picker.body = #1a1a1a
#import "~vuetify/src/stylus/theme"
#import '~vuetify/src/stylus/main'
And this is my own webpack.min.js don't know why you have excess config!
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/main.scss', 'public/css')
.stylus('resources/stylus/main.styl', 'public/css');
To prevent Vuetify from writing inline styles that could override your main.css, do:
mix.options({
extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
});
So, what changed?
You said you created main.style file but from your webpack.mix.js you are compiling vuetify.styl file into your css.
Your main.styl file should be saved in the path resources/stylus/main.styl
Note: You need to setup stylus-loader since Vuetify is built on top of stylus. If you havn't, in command line, run:
$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev
Also note: Default values for the stylus variables that you wish to change must be declared before the import
Didn't go through your variables list, should be okay though but confirm from this github page https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_variables.styl
Should be okay I believe
I work with gulp sass to compile, prefix and minify my scss to css and min.css, I use watch to fire compiling each time I save files but suddenly gulp-sass stopped writing the output files ONLY when saving partials, everything works fine when I save the main style.scss
This is the SASS log in my terminal on both cases, wether saving main file or partial scss files. As you can see it fires both times but only on the main files saving the output is generated and saved.
[11:54:50] Starting 'sass'...
[11:54:51] Finished 'sass' after 886 ms
[11:54:52] Starting 'sass'...
[11:54:53] Finished 'sass' after 809 ms
Gulp is installed globally and the Gulpfile.js below always worked until yesterday.
I tried to change the gulp.src path several times but without luck.
Obviously I still can compile everything saving the main style.scss but is really annoying when you work on several file simultaneously.
Another strange thing is that trying to change files path to compile the minified version wa reverted to an older date version; I thought it could be an NPM cache problem but I'm not really confident with node/npm, I use it just to compile SCSS and concatenate JS and that's it.
Thanks a lot in advance to anyone who could help me.
var themeurl = './';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var rename = require("gulp-rename");
var watch = require('gulp-watch');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src(themeurl + '_sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(themeurl))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename('style.min.css'))
.pipe(gulp.dest(themeurl));
});
gulp.task('scripts', function() {
gulp.src('_js/*.js')
.pipe(concat('scripts.js'))
.pipe(gulp.dest('assets/js'));
return gulp.src(themeurl + 'assets/js/scripts.js')
.pipe(uglify().on('error', function(e){
console.log(e);
}))
.pipe(rename('scripts.min.js'))
.pipe(gulp.dest(themeurl+'assets/js/'));
});
gulp.task('watch', function () {
gulp.watch(themeurl + '_sass/**/*.scss', gulp.series('sass') );
gulp.watch(themeurl + '_js/*.js', gulp.series('scripts') );
});
Have you solved your problem? I have the same issue.
My workaround is related how I write watch task. And I have to delete css bundle before every new compilation
// old
watch(`${paths.src}/sass/**/*.scss`, series(css, reload));
// workaround
watch(`${paths.src}/sass/*.scss`, series(delCSSbundle, css, reload));
The result is content of the CSS bundle is updated every compilation but date/time of the bundle remains the same.
Does it work when you replace the style with an * as shown in the code block below? The * tells gulp to search for all files ending with .scss in the folder.
gulp.task('sass', function () {
return gulp.src(themeurl + '_sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(themeurl))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename('style.min.css'))
.pipe(gulp.dest(themeurl));
});
Thank you Remco , I tried already but unfortunately nothing changed.
As i described upon in the update the problem seems to be related to file's date/time and not on the compiling: the compiling is updated with all my modifications but the date/time is not.
Faced similar issue, gulp tasks were running error free but producing no results for only my styles and image assets (and I didn't add or remove any dependencies, change anything (configuration) or so).
In my case I was using | in src() to read multiple files such as src('src/styles/**/*.{sass|scss}') and src('src/images/*.{png|jpg|svg}') so it turned to be that this was causing my file to be ignored.
Changing | to , solved the issue for me
src('src/styles/**/*.{sass,scss}')
src('src/images/*.{png,jpg,svg}')
Is it possible to add vuetify to default vuepress theme ?
I just need to add few components to default theme however it would be nice to use the vuetify for handling forms within my components.
I have found a custom vuepress theme which uses a vuetify, however I would prefer to use default vuepress theme.
Another option is to eject the default theme and add the vuetify to it. However I would prefer not to eject the default theme just add vuetify to it.
The previous answer from oscarteg got me most of the way there. Here's what I had to do for the .vuepress/enhanceApp.js file (and yes, if you do not have one go ahead and create it).
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(Vuetify);
options.vuetify = new Vuetify({})
};
Note that in the new Vuetify({}) passed to options.vuetify you can set your theming.
See https://github.com/vuejs/vuepress/issues/681#issuecomment-515704018
The easiest way would be to use the vuetify CDN. In your config.js add something like
module.exports = {
head: [
['link', { rel: 'stylesheet', href: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css` }],
['script', { src: `https://cdn.jsdelivr.net/npm/vue/dist/vue.js` }],
['script', { src: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js` }],
]
}
Something like that. See https://vuepress.vuejs.org/config/#head
Another way would be to install the vuetify package and add Vuetify to enhanceApp. It would look like this in your .vuepress/enhanceApp.js
import Vuetify from 'vuetify'
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(Vuetify)
}
See https://vuepress.vuejs.org/guide/basic-config.html#theme-configuration
With the last version of Laravel, I cannot use a simple jQuery plugin.
I try to use bootstrap-datepicker plugin. So I used:
yarn add bootstrap-datepicker
Then, in my app.js:
import './bootstrap';
import 'bootstrap-datepicker';
In bootstrap.js, I have:
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
This should make jQuery global I guess.
But when I try:
$(function() {
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
});
I got the error:
app.js:41747 Uncaught TypeError: $(...).datepicker is not a function
I have this error with a lot of plugins (daterangepicker, datepicker...)
What I have to do to use Webpack / Mix to just use one simple jQuery plugin?
I made it this way:
In console:
npm i jquery-ui-dist
/resources/assets/js/bootstrap.js:
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('jquery-ui-dist/jquery-ui')
} catch (e) {}
/resources/assets/sass/app.scss:
#import'~jquery-ui-dist/jquery-ui';
In your blade or at the end of boostrap.js
$('.input-daterange input').datepicker(params)
In this case I'm usign jQuery UI DatePicker
If jQuery and jQuery Plugin not in the same file, you need to use $.fn.extend() merge the contents of plugin object onto the jQuery prototype to provide new jQuery instance methods.
$.fn.extend({
datepicker: function() {
require('bootstrap-datepicker');
}
});