I have downloaded a nice theme from Bootswatch, but I would like to change some colors. So I got the bootswatch.less and variables.less and compiles a merged file using WinLess.
When I do this I get following error:
undefined #gradient > .vertical-three-colors
I have read an issue on github indicating that one should include: bootstrap.import.less
But I cannot find this in the bootstrap distribution.
Hope you can help.
In my case I had the same problem with _bootswatch.scss.
After yo angular with bootstrap-sass just replace all text in main.scss:
#import "bootstrap-sass-official/assets/stylesheets/bootstrap/mixins/_gradients.scss";
#import "bootstrap.css";
#import "_variables.scss";
#import "_bootswatch.scss";
angularsassbootswatchbootstrap-mixins-gradients
The issue is related to Gradient Mixins missing. Easy way to solve is the download latest source code of bootstrap and import
#import "path\bootstrap-3.3.7\bootstrap-3.3.7\less\mixins\gradients.less";
Related
I'm starting to work on a large application styling files. As Bootstrap 4 offers SASS files, I decided to follow that path.
I have built the following files structure:
theme.scss: general definitios for the theme like colors and fonts. Today there is just one but there could be more in the future.
global.scss: includes Bootstrap, some Bootstrap overrides and application componentes -i.e. a field with its label as part of the top border.
site.scss: general application styles.
additional page-specific SCSS files. I.e.: login.scss.
The problem I'm having is that global.scss -the one that imports Bootstrap- is then imported by site.scss as well as other files like page-specific SCSS files. So, Bootstrap styles end up in more than one compiled CSS. Compiled CSS files are what the application actually references.
I've previously used LESS and I could solve this using #import (reference) "bootstrap" instead of just plain #import "bootstrap". With SASS I haven't been able to find any solution to this problem without modifying Bootstrap core files.
Is there any other recommended way to organize the files and avoid this problem? Am I missing something or doing anything wrong?
Here are the files contents (they are large files but I'm posting only enough contents to show the problem I'm having):
theme.scss
$my-primary-color: #04459a;
global.scss
#import "../theme.scss";
$primary: $my-primary-color;
#import "../../third-party/bootstrap/scss/bootstrap.scss";
%field{
// [...]
}
site.scss
#import "global.scss";
div.field {
#extend %field;
}
// [...]
login.scss (or many other)
#import "global.scss";
// [...]
In the application I'm referencing site.css and login.css (in the loign page, of course) and both of them include Bootstrap styles.
I've built something that works for me, not sure if it's the best solution or which drawbacks it has, though.
I took some ideas from this article: My favored SCSS setup with Bootstrap 4. Here's what I've built:
First I created two SASS files for importing Bootstrap (similar to what the article does with bootstrap/_config.scss but splitted):
bootstrap/_sass-componentes.scss
#import "../../terceros/bootstrap/scss/_functions.scss";
#import "../../terceros/bootstrap/scss/_variables";
#import "../../terceros/bootstrap/scss/_mixins";
bootstrap/_config.scss
#import "_sass-componentes.scss";
// Every other bootstrap file I want to include:
#import "../../terceros/bootstrap/scss/_root";
#import "../../terceros/bootstrap/scss/_reboot";
#import "../../terceros/bootstrap/scss/_type";
// [...]
#import "../../terceros/bootstrap/scss/_utilities";
#import "../../terceros/bootstrap/scss/_print";
Then in global.scss I changed the bootstrap.scss import line to import only bootstrap/_sass-componentes.scss
Finally, in site.scss I included global.scss (such as it was before) and then full Bootstrap files trough bootstrap/_config.scss. **
** After importing _config.scss I also import my Bootstrap customizations. For doing them I followed the recomendation of the linked article although they do not apply directly to my own question.
I have the following mix of Material and bootswatch which cause a compiler error:
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
#import "~bootswatch/dist/yeti/_variables.scss";
#import "~bootstrap/scss/bootstrap.scss";
#import "~bootswatch/dist/yeti/_bootswatch.scss";
#import '~font-awesome/scss/font-awesome';
The error is:
ERROR in ./src/styles.css (./node_modules/#angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(1:4) Unknown word
> 1 | // Yeti 4.3.1
| ^
2 | // Bootswatch
3 |
According to this, I can use ng set defaults.styleExt scss to start processing Sass files.
However, it doesn't go through the process of converting your already existing .css files to .scss files. You'll have to make the conversion manually.
Can keep my css files and import what I need of sass files, side by side?
Thank you in advance
If you are going to support SASS in your application, consider only replacing the extension of your css files with .sass which will work without any further modification. This is because SASS is a superset of CSS and therefore simple CSS will be fully compatible.
Edit: Would the imported CSS not be of your own but rather from an external package (such as a node module), then removing the .css extension from your import should fix the problem:
#import '~#angular/material/prebuilt-themes/indigo-pink';
#import "~bootswatch/dist/yeti/_variables.scss";
#import "~bootstrap/scss/bootstrap.scss";
#import "~bootswatch/dist/yeti/_bootswatch.scss";
#import '~font-awesome/scss/font-awesome';
I am having a problem working with font awesome 5 and sass I have followed the instructions on their webpage to get started but i can seem to get the icons to appear i have a directory
C:\Users\myName\Learn\public\scss\vendors\font-awesome\fontawesome.scss
in my public\scss folder i have a home.scss file where i import fontawesome.scss as follows
#import "vendors/font-awesome/fontawesome.scss";
when i compile the code it shows the fontawesome classes and stuff when i look on the webpage there are no fonts just big white square further research tells me its not loading the webfonts i placed the webfonts folder inside my project in this directory
C:\Users\myName\Learn\public/webfonts
and in the _variables.scss file i modified the fa-path to point to
"../webfonts"; but this nothing works I would really appreciate any insight that would help me solve this problem because following the instructions online for font awesome 5 with sass doesn't seem to be working for me.
Your folder structure is a bit different, but it should give you a general idea.
// In your main scss file
#import "FontAwesome/fontawesome.scss";
#import "FontAwesome/fa-light.scss";
// In your font awesome variables
$fa-font-path: "../WebFonts" !default;
// Folder structure
/stylesheets/mycompiled.css
// Webfont location
/stylesheets/WebFonts
Its possible that you didn't import either a Light/Regular/Solid part, as everything else seems fine.
If still having issues, you can specify an absolute path (assuming /public is your root)
$fa-font-path: "/WebFonts" !default;
Using absolute path, mine works as
$fa-font-path: "/stylesheets/WebFonts" !default;
As some of the packages are now deprecated I've compiled what I needed to do in order to make FontAwesome 5 Free work with React and Typescript.
Here is how I've solved, considering the solutions posted by (#alexsasharegan and #cchamberlain):
My architecture:
React 16.7.0
Typescript 3.3.1
Bulma 0.7.2 (similar to bootstrap)
FontAwesome 5.7.1
1) Package.json (FontAwesome packages I've used. You can switch to FAR or FAL)
(...)
"dependencies": {
"#fortawesome/fontawesome-free": "^5.7.1",
"#fortawesome/free-solid-svg-icons": "^5.7.1",
};
(...)
2) In your webpack.config (very essential):
(...)
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
use: "url-loader?limit=100000"
}
(...)
3) In your main scss file :
$fa-font-path : "~#fortawesome/fontawesome-free/webfonts";
#import "./node_modules/#fortawesome/fontawesome-free/scss/fontawesome.scss";
#import "./node_modules/#fortawesome/fontawesome-free/scss/solid.scss";
4) That will allow you to use Font Awesome like this:
<i className="fas fa-check" />
Just in time: if you want to use FontAwesome as a component, look at their documentation that well explains how to import the JS files to put it to work.
https://fontawesome.com/how-to-use/on-the-web/using-with/react
Hope it helps and I've posted here because since last message some packages changed.
I'm trying to import a Google Font inside the main.scss file, but following code didn't work:
#import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
Is there a way to do that? I looking for this question in stackoverflow, but I don't find a concrete answer...
Can somebody help me?
Instead of using url(), try the below:
#import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700';
The correct syntax for importing Google Fonts into Sass:
#import url('https://fonts.googleapis.com/css2?family=Alegreya + Sans + SC:wght#400;500;800');
Another example from my case, for multiple import:
CSS:
#import url('https://fonts.googleapis.com/css?family=Raleway:100,300,400|Roboto+Condensed:300,700&display=swap');
SCSS:
#import 'https://fonts.googleapis.com/css?family=Raleway:100,300,400|Roboto+Condensed:300,700&display=swap';
Right know, using Gulp and Dart Sass, both work. I prefer the Sass-way, just saying. So, with the new Google Fonts’ syntax:
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700&display=swap");
or
#import "https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700&display=swap";
give the same, exact result compiled from Sass to CSS. Then, if you add one of these in a .scss file, you don’t have to worry at all.
Conversion error: Jekyll::Converters::Sass encountered an error while converti
ng 'assets/css/all.sass':
File to import not found or unreadable: 1-tools/-tools-dir.
on line 1
That is the error i get every time i run Jekyll and i can't seem to fix it. I've tried everything that i found on Google and still can't seem to make it work.
Any idea what is wrong with the includes?
My files are like this:
_-tools-dir.sass
#import 'bourbon/bourbon'
#import 'fonts'
#import 'normalize'
#import 'vars'
_-sections-dir.sass
#import 'header'
all.sass
---
---
#import '1-tools/-tools-dir'
#import '2-base/-base-dir'
#import '3-sections/-sections-dir'
and in base-dir i have no includes yet so the file is empty
With default Jekyll settings, all sass/scss/coffee imports are supposed to be in _sass folder.
Your #import '1-tools/-tools-dir' import rule is looking for _sass/1-tools/-tools-dir.sass file and not _sass/1-tools/_-tools-dir.sass (note the underscrore).
You can change the import to #import '1-tools/_-tools-dir or change the file name to -tools-dir.sass.
Same for other imports that will cause the same not found error.
you're probably doing the YouTube tutorial from DevTips (which is a pretty good one imo).
Add this to your config.yml:
sass:
sass_dir: assets/css
style: :nested