For some reason, the angular cli does not compile the sass file. This is my sass file:
/* You can add global styles to this file, and also import other style files */
/* Variáveis */
$bodyColor: #f1f1f1;
body { background: $bodyColor; margin: 0px; }
header{ background-color: #FFF059; width:100%; height: 54px; border-bottom: 1px solid #D9D9D9; }
.logo{ margin-top:4px; }
And this here is the error presented in the console:
ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.sass
Module build failed:
.logo{ margin-top:4px; }
^
Invalid CSS after "...rgin-top:4px; }": expected 1 selector or at-rule, was "{}"
in /Users/danielswater/Documents/MercadoLivre/src/styles.sass (line 10, column 26)
# ./src/styles.sass 4:14-187
# multi ./src/styles.sass
What is wrong? It would be a problem with the angular CLI
I have faced similar problem in angular2
First you need to make sure, your .angular-cli.json has .scss as the defaut style extension.
"defaults": {
"styleExt": "css",
"component": {}
}
Aftet that, I manually installed node-sass and sass-loader which fixed my errors
npm i -D node-sass sass-loader
You have to include your scss file e.g. 'bootstrap.scss' in your .angular-cli.json file as follows :
"apps": [
{
...
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
}
]
and then restart your
ng serve
Related
I'm working on a Laravel project and I'm using Tailwind CSS for it.
What I'm trying to do is to add a costume color in order to use it in the class in the HTML just like it is said in the documentation: https://tailwindcss.com/docs/background-color
I have added a color like this:
tailwind.config.js
theme: {
extend: {
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
},
colors: {
emerald: "#2dd4bf",
},
},
},
page.blade.php
<nav class:"bg-emerald">
....
</nav>
The color of the navbar won't change.
How can I fix it?
try executing (in the terminal)
npm run watch
or
npm run dev
I´m trying to work on my own angular library which was compatible for Angular 4.
My goal is to make it compatible for Angular 9.
For some reason, css is not applied for a child of a component. This component is the last nested component.
HTML output
<ui-label _ngcontent-nln-c13="" _nghost-nln-c12="" ng-reflect-label="test">
<span _ngcontent-nln-c12="">test</span>
</ui-label>
label.component.scss
foo-label {
//font-style: italic; //<-- works here :/
> span{
font-style: italic; //<-- not applied
}
}
Someone has got an idea ?
I found why it´s not applied.
It´s due to a scope component.
foo-label was wrapped by foo-tag like this :
<foo-tag _ngcontent-han-c14="" _nghost-han-c13="" ng-reflect-label="test" ng-reflect-hlevel="1">
<h1 _ngcontent-han-c13="">
<foo-label _ngcontent-han-c13="" _nghost-han-c12="" ng-reflect-label="test">
<span _ngcontent-han-c12="">test</span>
</foo-label>
</h1>
</foo-tag>
And the style was written in tag.component.scss.
like this :
tag.component.scss
:host{
> h1 {
> foo-label { //<--applied css until here !
> span {
...
}
}
}
}
You can fix with ::ng-deep like this :
:host{
> h1 {
::ng-deep > foo-label {
> span {
...
}
}
}
}
Works with mixin as well like this :
:host{
> h1 {
#include h($light-color, $title-header-size, $application-toolbar-icon-size);
}
}
#mixin h($text-color, $font-size, $size-img){
margin-top: 0;
margin-bottom: 0;
flex-shrink: 0;
white-space: nowrap;
::ng-deep > foo-label {
#include label($text-color, $font-size, $size-img);
}
}
I'm just not succeeding in using FontAwesome icons in my Nativescript-Vue app. If I just want to use a regular icon, it works fine:
<Label col="0" text.decode="" class="fa"></Label>
But when I want a Solid (or I suppose any of the others), no love.
<Label col="0" text.decode="" class="fa fas"></Label>
I've looked at so many instructions now that my eyes are crossed.
Today I upgraded to v5. But I don't thing I was able to get the solid ones to work before.
I work with Nativescript-Vue and I use Nathan Walker plugin nativescript-fonticon. It works very fine with FontAwesome 5.
It's very easy to use.
Install the plugin:
npm install nativescript-fonticon --save
Place font icon .ttf files in app/fonts
fa-brands-400.ttf
fa-regular-400.ttf
fa-solid-900.ttf
Create base class (my css file is placed in assets/scss/global.scss):
.fa,
.far {
font-family: 'Font Awesome 5 Free', 'fa-regular-400';
font-weight: 400;
}
.fas {
font-family: 'Font Awesome 5 Free', 'fa-solid-900';
font-weight: 900;
}
.fab {
font-family: 'Font Awesome 5 Free', 'fa-brands-400';
font-weight: 400;
}
Copy css to app somewhere. I place my files in assets\css folder (I use minified format):
assets/css/all.min.css
assets/css/brands.min.css
assets/css/fontawesome.min.css
assets/css/regular.min.css
assets/css/solid.min.css
Add and load the plugin in main.js
import { TNSFontIcon, fonticon } from 'nativescript-fonticon'
// Load TNSFonticon
TNSFontIcon.debug = true
TNSFontIcon.paths = {
fa: './assets/css/fontawesome.min.css',
far: './assets/css/regular.min.css',
fas: './assets/css/solid.min.css',
fab: './assets/css/brand.min.css'
}
TNSFontIcon.loadCss()
Vue.filter('fonticon', fonticon)
Use the component in your code:
<Label class="fas" text="fa-chess-knight | fonticon"></Label>
Nothing I tried from the V5 instructions seemed to work. (Maybe someone can write explicit instructions for using in Nativescript-Vue.)
But, falling back to the old way, the simple
<Label col="0" text.decode="" class="fas"></Label>
with
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
}
And, I must have somehow been interupted when I first set this up, because fa-solid-900 was not actually in my [app.fonts][1] folder. :-|
Not sure what all those fancy new packages I installed will do now.
On a site I'm developing w/ Bootstrap/SASS (SCSS) I'd like to have a Bootstrap button group (.btn-group) become a vertical group (.btn-group-vertical) using media selectors, rather than JavaScript. However, the well-known issues that #extend will not work inside a media selector, has left me befuddled. E.g., this raises an error:
.navGroup {
#extend .mt-1;
#extend .btn-group;
#include media-breakpoint-down(xs) {
#extend .btn-group-vertical;
}
}
If I were developing from scratch I'd rewrite .btn-group and .btn-group-vertical to simply #include a mixin, so that I could do something like:
.navGroup {
#extend .mt-1;
#include media-breakpoint-up(xs) {
#include btn-group-include();
}
#include media-breakpoint-down(xs) {
#include btn-group-vertical-include();
}
}
I would rather not change the original bootstrap _buttonGroup.scss file, since it will be overwritten at the next release/update. So I'm currently needing to copy and past the whole .btn-group-vertical definition:
.navGroup {
#extend .mt-1;
#extend .btn-group;
#include media-breakpoint-down(xs) {
flex-direction: column;
align-items: flex-start;
/* etc. for 70 lines */
}
}
Is there a way to easily convert an existing class definition into a mixin within Sass that would solve such a problem?
You could try using the flex classes. Sorry, I don't know the markup for the navGroup.
<div class="d-flex flex-column">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
You can apply these per breakpoint. Checkout https://getbootstrap.com/docs/4.0/utilities/flex/
.test {
#include flex-grid-row();
.eight { #include flex-grid-column(8); }
.four { #include flex-grid-column(4); }
}
<div class="test">
<div class="eight" style="background: red; height: 150px;"></div>
<div class="four" style="background: blue; height: 150px;"></div>
</div>
Given the above code why does the grid stack and not display side by side? if I remove the 4 from flex-grid-column() then is displays as I would expect as the .four takes up all the available space, but why not if I specify how many columns?
The markup looks correct and works great in my flex project.
You can make sure you have the flex-grid setup in app.scss
[]
and
After importing Foundation via npm #import "node_modules/foundation-sites/scss/foundation.scss"; I then needed to #include foundation-everything(true); Passing true switches to flexbox.
I found that out on this page http://foundation.zurb.com/sites/docs/flexbox.html#enabling-flexbox-mode