Less compiler prefixes url with ../ on his own - css

I have a problem compiling bootstrap less into css.
I am using Visual Studio with Web Compiler extension.
https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c
The following variables are defined:
#icon-font-path: "fonts/";
#icon-font-name: "glyphicons-halflings-regular";
This is the part that uses variables:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('#{icon-font-path}#{icon-font-name}.eot');
}
This is the resulting css:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
}
The problem is that the url gets prefixed with ../.
What is causing this, how can I get url without prefix - fonts/glyphicons-halflings-regular.eot?

I have found the solution, so I am posting here if someone encounters the same problem.
Edit the compilerconfig.json and set relativeUrls option to false.
If not specified, the default value appears to be true.
{
"inputFile": "Bootstrap/less/bootstrap.less",
"outputFile": "Bootstrap/less/output/bootstrap.css",
"options": { "relativeUrls": false }
}
This appears to be equivalent to lessc --relative-urls when using Web Compiler extension.

Related

Using font awesome ttf with scss

I'm trying to use font awesome with scss.
#font-face {
font-family: 'awesome';
src: url('../../fonts/font-awesome/fa-light-300.ttf') format('ttf');
}
the path seems to be correct but i'm getting errors:
Failed to compile.
./src/assets/styles/main.scss
(./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/styles/main.scss)
Module not found: Error: Can't resolve
'../../fonts/font-awesome/fa-light-300.ttf' in
'C:\Users\idogo\Desktop\‏‏תיקיה חדשה\sprint-4\src\assets\styles'
I hope you can help me,
thanks
Appernetly all i needed is to add ~# at the begining of the path.
#font-face {
font-family: 'awesome';
src: url('~#/fonts/font-awesome/fa-light-300.ttf') format('ttf');
}

can't use #font-face SCSS local folder

I have two "ttf" Font files that I have to use with Sass - SCSS and I can't use it directly from the folder
My _mixin.scss file:
#mixin font-face($font-name, $font-path, $font-weight, $font-style) {
#font-face {
font-family: "Lato-Bold";
src: url("../../css/fonts/Lato/Lato-Bold.ttf") format('truetype');
font-weight: 700;
font-style: bold;
}
}
This is correct?
this give me an ERROR when compile..it's my first time using font-face and ttf files. This is a project, so I can't add other fonts, I have to use it like that, can you help me?
How can I use this mixin, how to include in my font-family in my CSS and/or Html?
I'm trying to write this in my _typography.scss file and this give an error":
#include font-face("Lato-Bold", "../../css/fonts/Lato/Lato-Bold", 700, bold);
ERROR in ./src/scss/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/scss/main.scss)
Module not found: Error: Can't resolve '../../css/fonts/Lato/Lato-Bold.ttf' in '/Users/****/Desktop/****/src/scss'
# ./src/scss/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/scss/main.scss)
Ps: I'm using webpack.config.js | webpack-dev-server and compiling sass with --watch
Thank you for your help!
try this in your mixin
#mixin font-face($font-name, $font-path, $font-weight, $font-style) {
#font-face {
font-family: $font-name;
src: url(#{$font-path});
font-weight: $font-weight;
font-style: $font-style;
}
}

CSS relative path in Mozilla

i wrote this CSS code into an HTML file to running in firefox:
<style>
#font-face {
font-family: abc;
src: url('./../abc.ttf');
}
* {
font-family: abc;
}
</style>
but firefox doesn't find font.
although i did try this code too:
src: url('../abc.ttf');
but no effect.
i run HTML under Firefox 60.
my folder structure is:
E:/1/index.html
E:/abc.ttf
No need to include the initial ./ part, try this instead:
src: url('../abc.ttf');

CSS not recognizing one my linked fonts

In CSS, I'm linking to two local fonts. Only one is being recognized currently and I really have no idea what I'm doing wrong.
#font-face {
font-family: 'The Rainmaker';
src: url('The Rainmaker.otf');
}
#font-face {
font-family: 'Timeline';
src: url('Timeline.ttf');
}

CSS font-face not accepting 'format' syntax

I am putting a custom font (Alef-Regular) in my stylesheet, with the following code (... represents longer path, not actual code).
#font-face
{
font-family: Alef;
src:
url('.../Alef-Regular.ttf') format ('truetype'),
url('.../Alef-Regular.woff') format ('woff');
}
This does not work when I call the font. Firefox gives the following warning:
Expected end of value but found 'format'. Skipped to next declaration.
However, when I remove the formats and strip it down to:
#font-face
{
font-family: Alef;
src: url('.../Alef-Regular.ttf');
}
Then it works just fine.
I double-checked and triple-checked, and the syntax in the first example appears to be correct. Am I missing something in the syntax, or could there be a problem elsewhere?
You have to leave no space between the 'format' word and the parenthesis.
Like that :
#font-face
{
font-family: Alef;
src:
url('.../Alef-Regular.ttf') format('truetype'),
url('.../Alef-Regular.woff') format('woff');
}

Resources