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';
Related
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 am using Laravel with Vue.js and Webpack / Laravel Mix.
I have Single File Components which should make use of Mixins.
The folder structure looks like this:
/app.js
/vue-components/Component.vue
/mixins/api/common.js
common.js defines a mixin like so:
export default {
// all content goes here
}
And when I import it from app.js and console.log it, it shows the data:
import industries from "./mixins/api/common";
console.log(industries); // this shows the content
Vue.component(
'some-component',
require("./vue-components/Component.vue")
);
Within Component.vue I use mixins: [ industries ], and that gives me the following error:
Component.vue?bb93:73 Uncaught ReferenceError: industries is not defined
Question 1:
Is it not possible to declare mixins globally and reference them from within a component?
To solve the issue I tried importing the mixin directly within the component instead of the global app.js file.
But import industries from "./mixins/api/common"; within Component.vue throws the following error while trying to compile with npm run:
This relative module was not found:
* ./mixins/api/common in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"babel-plugin-syntax-dynamic-import","webpack-async-module-name"],"env":{"development":{"compact":false}}}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/vue-components/Component.vue
Question 2:
If I have to import the mixin from within the Single File Components, what should the path look like?
As in Vue Document, You can declare mixin globally
//- build your mixin
const mixin = {
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
}
Vue.mixin(mixin)
new Vue({
myOption: 'hello!'
})
// "hello!"
You can also import mixin to use for each component.
In above your Component.vue, import path is not correct.
You should do import industries from "../mixins/api/common"
I have the following in my gulpfile.js
var baseDir = 'Base/Assets/scss/**/**';
var modulesDir = 'Modules/**/Assets/scss/*';
return gulp.src([baseDir + '*.scss', modulesDir + '*.scss'])
.pipe(sass({cacheLocation: sassCacheDir, lineNumbers: false}))
.pipe(concat('app.min.css'));
Within the baseDir I have an app.scss file like this:
#import "node_modules/foundation-sites/scss/util/util";
#import "settings";
#import "foundation";
Within the util there's a function called rem-calc. I use this function in my Modules scss files, but these are never executed. Instead in the outputted css I have the following margin-top: rem-calc(10); when this should actually have been converted in to rem's.
The only thing I can thing of is that Gulp isn't remembering the src ordering. Any help will be greatly appreciated.
I have solved this by removing the modulesDir from the gulpfile, instead I'm using a new package called gulp-sass-glob
This allows me to specify the glob in my app.scss file (within baseDir), like this:
#import "node_modules/foundation-sites/scss/util/util";
#import "settings";
#import "foundation";
// now import the modules
#import "../../../../Modules/**/Assets/scss/*.scss";
My gulpfile.js is then like this:
var baseDir = 'Base/Assets/scss/**/**';
gulp.task('site-css', function () {
return gulp.src(baseDir + '*.scss')
.pipe(sassGlob())
.pipe(sass({cacheLocation: sassCacheDir, lineNumbers: false}))
.pipe(concat('app.min.css'));
Hopefully this helps someone else which comes across this scenario.
I would like to globally append a specific selector to all CSS selector used in my application.
I'm using React and those Webpack loaders post-css, css-loader, sass-loader and extract-text-webpack-plugin.
I don't want to edit all my classname within jsx files. I just want to append this specific selector at build time.
Is there a loader to achieve this? Or any other solution...
What I actually have:
.myClass {
...
&--blue { ... }
}
What I want after Webpack transpilation:
.specificClass .myClass { ... }
.specificClass .myClass--blue { ... }
Thanks
Gautier
PS: The reason I need this feature is to avoid CSS selector collision with the Website I'm integrating my application. I don't wan't to manually edit all my scss files to append the selector.
this should be solvable by in you main sass file:
.specificClass {
#import 'variables';
#import 'fonts';
// ... do more imports
}
For example:
main.scss
#import "variables";
#import "page";
_variables.scss
$color-a: #FFFFFF;
_page.scss
div.test {
background: $color-a;
}
Or does variables have to be imported on every sheet that wants to use a variable from it?
Currently, I'm getting Error: Undefined variable: "$color-a"
Edit I should add that I'm using sassc to compile the files in a clojure project:
:sass {:sass-file "main.scss"
:source-maps false
:output-style "compressed"
:output-dir "css/"}}