I have installed argon design system using npm. And inside the head tag, I have added links from the documentation. But I want to extract it from node modules using mix. And run in webpack so that it renders styles. Please, someone, help with a detailed answer.
import the argon js file (in bootstrap.js for example if you're using the default laravel boilerplate) after popper, jquery and bootstrap:
require("argon-design-system-free/assets/js/argon-design-system");
and the css file (in app.scss if you're using it):
#import "~argon-design-system-free/assets/css/argon-design-system.css";
if you want the nucleo icons import then before the css file:
#import "~argon-design-system-free/assets/css/nucleo-icons.css";
Related
I am working on Asp.net Core With Angular 6 Project
I installed ngx-admin template to angular Project
then includes scss style in my global style like this
#import '~#nebular/theme/styles/globals';
#include nb-install() {
#include nb-theme-global();
};
when I run the project I got this error :
Microsoft.AspNetCore.SpaServices[0]
Including .css files with #import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
any Help !?
This error indicates you are loading a CSS file. It's possible one of you above imports is importing a CSS file.
#import "foo.css";
Which basically is converting it to.
#import url(foo.css);
If you want to import the contents of a CSS file into the output CSS then it's recommended just reference the CSS file directly in your angular.json in the "styles": [] section.
We're using the Angular flavor of Material 2 (https://material.angular.io/) for a main project, but would like to create a separate static (HTML/CSS) prototyping workspace that is able to access just the Material 2 CSS styles from that main project. The idea is that this separate directory will pull the compiled CSS from the Angular project, but allow for experimentation in HTML/CSS styling without configuring any JS.
Is it possible to compile the full CSS (components, typography, etc.) from the Angular Material 2 project, without needing AngularJS? It seems like there are styles being inserted by JS using the <style> tag.
Here's a basic demo of the SCSS file I've tried to build to load the Material styles:
#import "~#angular/material/theming";
#include mat-core();
This works for adding things like typography and the class names, but it doesn't add all of the possible styles for those classes. For example, the card component only gets very basic styles—it's missing the other styles such as padding that seem to be injected via JS.
I also tried the material-components-web project, which has compiled CSS here. It comes very close to doing the job. But unfortunately just renaming .mdc- to .mat- is not enough. The component names and usage aren't quite the same.
For example, material-components-web uses BEM: mdc-card__actions.
Whereas the Angular versions calls it .mat-card-actions.
In my laravel 5.6 / vue.js 2.5.7/ Bootstrap4.1.0 application I want to set different color themes and I found this collection https://github.com/thomaspark/bootswatch
But how correctly to set them to my project? I tried to replace files
node_modules/bootstrap/dist/css/bootstrap.css
node_modules/bootstrap/dist/css/bootstrap.min.css
and cleared cache and rerun
npm run watch-poll
But no effect... Which is the right way?
Are there some tools to change color themes programmatically, say depending on logged user options ?
Adding a link of one bootswatch file in my layout file resources/views/layouts/app.blade.php, like:
<link href="{{ asset('css/darkly/bootstrap.min.css') }}" rel="stylesheet">
I see that colors of my layout of my pages is different, but I mean that in this case I ADD this css/darkly/bootstrap.min.css file to the EXISTING(ORIGINAL) bootstrap.min.css
and now I have 2 bootstrap.min.css files in my system.
Is it good decision?
I supposed that creators of bootswatch meant to REPLACE the original bootstrap.min.css file. How do you think?
And that is the question where original Bootstrap css(and bootstrap.js to) are attached to the project ?
in my layout file resources/views/layouts/app.blade.php a line:
that is a ref to my custom css file, the styles I add to the project.
I did not find how to skip attaching of the original Bootstrap CSS file...
Thanks!
Bootswatch is not meant to REPLACE the existing bootstrap CSS file. It is meant to work and OVERRIDE the styling rules from the default one, which means, load bootswatch css after you load the bootstrap css.
It would also be advisable to rename your downloaded bootswatch CSS file.
I'm currently working on a project and Im attempting to load my scss/sass through webpack. I'm currently loading it in successfully using the following libs:
node-sass
sass-loader
css loader
style-loader
I am able to require/import the styles in successfully but the problem occurs that when I load up the application the page loads without the styles for about 1.5 seconds and then after the page "blinks" and the styles finally load in.
Is there a way to get around this through webpack? I have heard of ExtractTextPlugin and a few others but I've tried to implement it by looking at article examples and github examples but they don't seem to work by using require/import where they are needed. I'd like to only require the styles based on my react component needs. Not loading any styles that the components don't need.
You have (at least) two options to prevent this FOUC (Flash of unstyled content):
Use a plugin like mini-css-extract-plugin or extract-text-webpack-plugin to extract the compiled CSS into a separate file that you can load normally in your <head> (read more) or
Hide your content, using CSS, until styles are ready, the loaded styles should contain the styles that will make the content visible.
I’m diggin into Liferay theming with Sass.
One thing I really like to know is: How to make use of variables defined in the theme within a custom portlet.
Because I want to have generic theme related styles within my theme and portlet specific styles within the portlet to increase maintainabilty und portability.
Lets say I have the follwing file within my theme:
css/_ aui_variables.scss
Within this file I have overridden the default values of the Bootstrap variables defined in the parent theme:
_styled/css/_aui_variables.scss
Of course I would like to make use of these variables in my portlet specific Sass files which I would like to place within portlets main.css (which is compiled by the Sass parser as well).
Please let me know that this is possible.
When trying to import my variables in the portlets main.css via:
#import "foobar-default-theme/css/_aui_variables";
My console in Eclipse (Liferay IDE) shows me the following error message:
File to import not found or unreadable: foobar-default-theme/css/_aui_variables.
Load paths:
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/webapps/ROOT/html/css/common
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/temp/25-foobar-top-navigation-portlet/css
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib/sass
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/temp/liferay/ruby/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/Users/mkuehnel/Documents/Projects/foobar/liferay-portal-6.2-ce-ga2/tomcat-7.0.42/temp/liferay/ruby/gems/compass-0.12.2/frameworks/compass/stylesheets
Compass::SpriteImporter
/css/main.css:2
[…]
Any hints appreciated.
Best regards,
Michael