I am using Gulp and Boostrap to put together a theme. I have main.scss file which has the following code:
#import 'base/_base.scss';
#import 'base/_mixins.scss';
#import 'base/_variables.scss';
#import 'layouts/_footer.scss';
#import 'layouts/_header.scss';
#import 'layouts/_nav.scss';
#import 'modules/_typography.scss';
#import 'modules/_blocks.scss';
#import 'modules/_buttons.scss';
#import 'modules/_sections.scss';
#import 'modules/_components.scss';
#import "bootstrap";
#import "bootstrap/theme";
Bootstrap is being loaded ok as I can see it in a index page I have. The issue comes is when I add code to e.g. _base.scss. I added the following:
body {
font-size: 16px;
line-height: 1.5em;
color: #666666;
}
and then ran gulp and I can see that it generated a css main.css file for me, which the index page is using. I can see the body override at the top of the main.css file, but when I load the page it isnt being applied. I can see in inspect element that it is being overridden by bootstrap definition of body further down.
I did another test and set $font-size-base: 16px; and ran gulp and it applied that change fine.
If anyone can point me in the right direction, it would be very much appreciated.
As I see it you have 2 choices.
body
{
font-size: 16px !important;
line-height: 1.5em !important;
color: #666666 !important;
}
You load your css file after bootstrap.
In your css file you add !important to the end of anything you want to override like above.
Can you try this
html body {
font-size: 16px;
line-height: 1.5em;
color: #666666;
}
Related
I have an Angular CLI app and I'm using #import '~#angular/material/theming'; in the global styles.scss. I also have a component where I would like to define a css class in that component's .scss file that uses some of the Angular Material typography:
#import '~#angular/material/theming';
$config: mat-typography-config();
.myClass {
font-size: mat-font-size($config, title);
font-weight: bold;
}
By importing ~#angular/material/theming more than once in my application, will it include that css more than once and bloat my payload? Or is the Angular CLI compiler smart enough to handle this?
If you're importing the same CSS into multiple components, then yes the CSS will be duplicated, but each time it will be scoped to that component.
For example if you have the following...
product-list.component.css:
#import '../../foo.css';
...
top-bar.component.css:
#import '../../foo.css';
...
../../foo.css:
a { color: red; }
Your css output in the tag will look something like this:
<style>
a[_ngcontent-gna-c48] { color: red; }
...
</style>
<style>
a[_ngcontent-gna-c50] { color: red; }
...
</style>
Here's a full StackBlitz based on Angular's Getting Started example project.
In Short, i got following structure:
- less
-- node_modules
--- bootstrap
----less
----- ALL BOOTSTRAP DATA
-- _components
--- _forms.less
-- all.less
Everything (there are some more) is imported in all.less, it looks like this:
#import "node_modules/bootstrap/less/bootstrap";
// Font Awesome
#fa-font-path: '../fonts';
#import "_base/_variables";
#import "_base/_base";
#import "_base/_mobile";
#import "_base/_sections";
#import "_base/_typography";
#import "_components/_buttons";
#import "_components/_carousel";
#import "_components/_checkbox";
#import "_components/_dropdown";
#import "_components/_forms";
#import "_components/_helper";
#import "_components/_hover";
#import "_components/_modal";
#import "_components/_navbar";
#import "_components/_sidebar";
#import "_components/_table";
#import "_modules/_kollektion";
#import "_modules/_produkt";
#import "_modules/_register";
#import "_modules/_startseite";
#import "_modules/_warenkorb";
When i try to compile everything inside of Shopware i get the error:
Während der Bearbeitung von Shop "TEST" ist ein Fehler aufgetreten: in _forms.less on line 250, column 7 248| top: 0; 249| 250| #media (max-width: #screen-xs-max) { 251| height: 35px; 252| width: 40px; 253| background-color: black;
That means there is an error in my _forms.less on line 250.
Line 250 looks like this:
#media (max-width: #screen-xs-max) {
height: 35px;
width: 40px;
background-color: black;
color: #white;
border-left: 5px solid #white;
}
When i hover the #screen-xs-max variable in PHPStorm it says:
Element "screen-xs-max" is only resolved by name without using
explicit imports
When i use the variable directly in the all.less (after removing the _forms.less from its import) it works just fine.
Any suggestions for this?
This PhpStorm annotation is only a warning and can usually be ignored while working with shopware templates.
You should check, whether the variable #screen-xs-max is actually defined somewhere at all, because it is not a shopware default breakpoint. Without further definitions only these breakpoints are available:
#phoneLandscapeViewportWidth: 30em; // 480px
#tabletViewportWidth: 48em; // 768px
#tabletLandscapeViewportWidth: 64em; // 1024px
#desktopViewportWidth: 78.75em; // 1260px
Also make sure you don't collide with the default shopware-breakpoints and will experience other unwanted behaviour down the road. e.g.:
#media screen and (max-width: #tabletLandscapeViewportWidth) {
...
}
I'm trying to change the style of the md-dialog.
in my main.scss i'm importing the prebuild pink-bluegrey theme...
then in my component I import the following -->
#import "#angular/material/dialog/dialog.scss";
$mat-dialog-padding: 0;
$mat-dialog-border-radius: 0.5rem;
$background: #ffffff;
#mixin mat-dialog-container {
padding: $mat-dialog-padding;
border-radius: $mat-dialog-border-radius;
background: $background;
}
#include mat-dialog-container;
The padding and border radius is correctly applied to the dialog window.
But the background is not working... also tried the !important statement.
I'm using this in a single component...
Is there also a change to apply those styles globally?
in chrome dev tools I see those applied style changes. The background gets overwritten by the pink-bluegrey theme..
hope anyone can help.
thanks
It is better practice to add a wrapper class around your dialog, and then add styling to the children. Have a look at this article for more information.
When you open your Angular dialog, you can add a panelClass
attribute, like this:
this.dialog.open(MyDialogComponent, {panelClass: 'my-panel'}).
then, in your css (e.g. in the root styles.css file), you can add the following:
.my-panel .mat-dialog-container {
overflow: hidden;
border-radius: 5px;
padding: 5px;
}
EDIT Warning
It is also possible to add the css to another file than the root styles.css, but then you have to use ::ng-deep in the css (e.g. ::ng-deep .my-panel{ // ... }). This is not advised, as ::ng-deep is deprecated in Angular
EDIT2 Good alternative
If you are using scss, then you can place your .my-panel-style in your mydialog.component.scss file, by using a #mixin, and #import the file in styles.scss. You can then use #include to load the defined mixin.
in your mydialog.component.scss file
#mixin myPanel(){
.my-panel .mat-dialog-container {
// css here
}
}
in your styles.scss
#import 'path/to/mydialog.component.scss' // you don't need the .scss suffix
#include myPanel();
I solved this problem by including this css block in the end of file material2-app-theme.scss
.mat-dialog-container {
overflow: hidden !important;
border-radius: 5px !important;
padding: 5px !important;
}
can you use css then change background in mat dilog, at i used color transparent
mat-dialog-container {
padding: 0px !important;
background: transparent !important;
}
My main.scss file is as:
#import "components/variables.scss"; // This file contains all font variables etc
#import "components/global.scss"; // This file contains global styles to be applied
#import "components/header.scss"; // All header and top menu navigation
#import "components/bslider.scss"; // The main middle slider that have whole content of webside as slides.
I have added newlines after each #import statement but when the output is generated there is no space in between css of individual files. The output is like this:
* {
font-size: 14px;
}
/*global css finishes*/
/*header css starts*/
header {
position: absolute;
}
But I want newlines like this:
* {
font-size: 14px;
}
/*global css finishes*/
/*header css starts*/
header {
position: absolute;
}
I am using yeoman webapp generator to convert sass into css. Any help will be appreciated, thanks.
I haven't used yeoman , but you can change the style of the css that is output
sass --watch yourfile.scss:style.css --style expanded
You can read more on SASS styles here:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
Say I am using SASS and I want to borrow heavily from some existing stylesheet, be it another SASS stylesheet or a CSS one. I can #import that other sheet, then use #extend to use some of its rules. Is there an option to then exclude all the other stuff I didn't use from the resulting CSS?
#import takes the whole stylesheet/partial and puts it in your stylesheet, there's no way to exclude any of the rules aside from overwriting them all to defaults. If you have an originating SASS file you could abstract them all into partials and then #import what you need into your new file.
There's no way to import another sass file so that #extends can be used without rendering the content. Create and import a partial full of %placeholders to use #extend without renders content would be a good choice if it wasn't be rendered like this:
_import.scss
%button {
color: #fff;
width: 72px;
height: 24px;
}
main.scss
#import "import";
.button-blue {
#extend %button;
background-color: blue;
}
main.css
.button-blue {
color: #
width: 72px;
height: 24px; }
.button-blue {
border: 1px solid #fff; }
So I think that the best way to achieve your goal is import a partial with some mixins in your style, I 've been using sass for half a year and so far I haven't had a need to import #extends yet so please, tell me what you want to do exactly with the #extend and I will try to help you to get it with a #mixin