Is it easily possible to change and apply a new bootstrap theme/template (like this one for example : https://elements.envato.com/admin-io-GG5ENR) to my Jhipster Angular 5 web app?
Is there a procedure to follow?
Thank you
I managed to change themes by editing the file from darkly (commented out) to lumen:
src\main\webapp\content\scss\vendor.scss
/***************************
put Sass variables here:
eg $input-color: red;
****************************/
// #import '~bootswatch/dist/darkly/variables';
#import '~bootswatch/dist/lumen/variables';
// Override Bootstrap variables
#import 'bootstrap-variables';
// Import Bootstrap source files from node_modules
#import '~bootstrap/scss/bootstrap';
// #import '~bootswatch/dist/darkly/bootswatch';
#import '~bootswatch/dist/lumen/bootswatch';
/* jhipster-needle-scss-add-vendor JHipster will add new css style */
Then I ran the command:
npm run webpack:build
The changes were hot reloaded.
Related
I am new learner with Laravel and for the first time i have installed laravel mix. The node.js is installed and everything but when i want to change the backround color there is no effect on my page.
Here are my codes:
webpack.mix.js:
const mix = require('laravel-mix');
mix.disableNotifications();
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/scss/app.scss', 'public/css', [
//
]);
I have created the scss folder and the .scss files:
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
_variables.acss:
// Body
$body-bg: #ff0000;
// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
Also i have added at app.blade.php:
<link rel="stylesheet" href="{{asset('css/app.css')}}">
I disabled all installed extensions in Chrome - works for me. I have now clear console without errors and remove MDB bootstrap.
You'd need to actually import Bootstrap's functions, variables & mixins file to have the overwrite work. Try doing this:
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
#import "~bootstrap/scss/functions";
// Variables
#import 'variables';
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
// Bootstrap
#import '~bootstrap/scss/bootstrap';
Then re-compile and try.
I'm using scss to style my next.js app however I noticed that all styles are missing when I preview the first paint via the network tab in google chrome.
As you can see the page is fairly simple and does not fetch any initial props. I'm suspecting that the server is for some reason not building the whole page (including styles) on the backend.
My next.config.js setup is:
const withStyles = require("#webdeb/next-styles");
module.exports = withStyles({
sass: true, // use .scss files
modules: true, // style.(m|module).css & style.(m|module).scss for module files
});
With newer nextjs versions, I don't think you need to use withStyles and similar plugins anymore.
global styles only
You can just:
install sass
install whatever css framework you're using and follow their instructions for how to include their css / scss files in your project
potentially get rid of your next.config.js file entirely if it's a simple project and all you had in the config file was css configuration stuff.
import your scss files directly into your js files (eg import '../styles/app.scss')
scoped scss styles
seems you can keep the next.config.js file, based on this workaround I found here through a google search:
const withStyles = require('#webdeb/next-styles')
module.exports = withStyles({
sass: true, // use .scss files
modules: true, // style.(m|module).css & style.(m|module).scss for module files
})
Did anyone managed to add the SCSS from Material Design Bootstrap in the default template of Keystone.js ?
I am new to node.js and front-end development so I am not sure what I am doing but, I bascially added the MDB folder in my public/styles. After that I've modified the sites.scss, I commented out #import "site/variables"; and #import "site/layout"; and I added #import "mdb"; but this does not really seemed to work. I get the error:
in /my_path/public/styles/mdb/free/data/_variables-b4.scss:320:34
Error thrown for request: /styles/site.css
Error: Incompatible units: 'rem' and 'px'.
at options.error (/my_path/node_modules/node-sass/lib/index.js:291:26)
Anyone any idea?
I am attempting to start using Bourbon and Neat Sass libraries in my project. I want to compile Sass with Gulp. This is a simple styles task setup that I've found in one of the tutorials:
var gulp = require('gulp'),
sass = require('gulp-sass'),
neat = require('node-neat').includePaths;
var paths = {
scss: './assets/styles/*.scss'
};
gulp.task('styles', function () {
return gulp.src(paths.scss)
.pipe(sass({
includePaths: ['styles'].concat(neat)
}))
.pipe(gulp.dest('./dist/styles'));
});
gulp.task('default', function () {
gulp.start('styles');
});
Then in the main .scss file I place the imports:
#import "bourbon";
#import "base/base";
#import "neat";
This task executes correctly.
What puzzles me here is what includePaths does exactly?
Base on the example above, can somebody explain to me what includePath's role is?
The SASS compiler uses each path in loadPaths when resolving SASS #imports.
loadPaths: ['styles/foo', 'styles/bar']
#import "x"; // found via ./styles/foo/_x.scss
#import "y"; // found via ./styles/bar/_y.scss
Note that the compiler resolves each #import by considering each path in loadPaths from left-to-right (similar to $PATH in a UNIX environment). An example scenario could be:
loadPaths: ['styles/i', 'styles/ii', 'styles/iii', 'styles/iv']
#import "x"; // no file at ./styles/i/_x.scss
// no file at ./styles/ii/_x.scss
// found a file at ./styles/iii/_x.scss ...
// ... this file will be used as the import
// ... terminate lookup
// the file ./styles/iv/_x.scss will be ignored
There was no _x.scss file in styles/i, so it moved on to look inside styles/ii. Eventually it found an _x.scss file in styles/iii and finished the lookup. It looks at each folder in loadPaths starting from the first element in the array and moving right. After attempting all paths, if we can't find the file, then we declare that this #import statement is invalid.
Load paths is useful if you have a external library (like bournon/neat).
The external library is large and will use lots of #import statements. However they won't match your project folder structure and so won't resolve. However, you can add an extra folders to the loadPaths so that the #imports inside the external library do resolve.
includePaths
Type: Array Default: []
An array of paths that libsass can look in to attempt to resolve your #import declarations. When using data, it is recommended that you use this.
in sass, you can orginize your sass files in multiple folders, but you want your main.sass to be able to import them when it compiles, so you can specify the includePaths, so that sass knows where to find the #import sass file, here you use node-neat, if you want to import some styles from it, by default, sass don't know where to look, so you need to tell sass where to find the file to import
I just did a fresh installation of sails (v0.11.0) in my server and after checking this up and working on controllers I found that css, js and templates files included into the assets folders are not being injected to the layout, if there any reason for this to happen? I mean, it is a clean fresh sails installation....
In my quest to get SailsJS to auto-inject stylesheets into the layout file under views/layouts/layout.handlebars in my case, I've found out a couple things...
When you first create your sails app using:
sails new APPNAME --template=handlebars --verbose
note: link below explains above syntax...
Using handlebars templates in Sails.js
Go to config > views.js
It will say:
layout: 'layouts/layout.handlebars'
change to:
layout: 'layouts/layout',
Go to tasks > config > sails-linker.js
Because I'm in development mode right now I will Ctrl + f searching for:
"devStyles"
devStyles: {
options: {
startTag: '<!--STYLES-->',
endTag: '<!--STYLES END-->',
fileTmpl: '<link rel="stylesheet" href="%s">',
appRoot: '.tmp/public'
},
files: {
'.tmp/public/**/*.html': require('../pipeline').cssFilesToInject,
'views/**/*.html': require('../pipeline').cssFilesToInject,
'views/**/*.ejs': require('../pipeline').cssFilesToInject
//ADD HANDLEBARS INJECTION HERE
}
},
Notice it has .html, & .ejs types being injected but not .handlebars
add this line:
'views/**/*.handlebars': require('../pipeline').cssFilesToInject
where I commented:
//ADD HANDLEBARS INJECTION HERE
At this point you should be able to drop a .css file into assets > styles and have it auto-copied to .tmp/public/styles
run:
sails lift
in your command prompt and give it about 20 seconds or so to have the stylesheet manifest its style on whatever page you have in your routes.js
'/': {
view: 'index'
}
As you can see, I made a new .handlebars file index.handlebars and set it as my root level page. You may have to refresh the page a time or two to get the newly auto-injected CSS to show.
P.S. It appears there is no more need to append --linker when first creating a SailsJS project. Also fyi, I'm using sails version 0.11.0
Also if you run sails lift --verbose the line below is how you know the .handlebars injection is working
verbose: Grunt :: File "views/layouts/layout.handlebars" updated.
Hope this helps!
Also, when adding Handlebars Helpers they should go in a file helper.js which should be located in config > helper.js
At the top of the helper.js file I found I had to require handlebars as follows
handlebars = require('sails/node_modules/express-handlebars/node_modules/handlebars');