I am importing a Sass file into my component with
#import 'src/assets/sass/var'
In the browser everything is correct but WebStorm tells me:
Error: Can't find stylesheet to import.
#import 'src/assets/sass/var'
home.component.css looks like this:
/* Error: Can't find stylesheet to import.
* ,
* 1 | #import 'src/assets/sass/var'
* | ^^^^^^^^^^^^^^^^^^^^^
* '
* home.component.sass 1:9 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
"Droid Sans Mono", monospace, monospace;
white-space: pre;
display: block;
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Can't find stylesheet to import.\a \2577 \a 1 \2502 #import 'src/assets/sass/var'\d\a \2502 ^^^^^^^^^^^^^^^^^^^^^\a \2575 \a home.component.sass 1:9 root stylesheet";
}
Why do I get this error?
The error comes from SASS compiler, not from the IDE. You need to specify a valid relative path in import, or pass a load path to the compiler to get the import resolved.
Just change the import to #import "./path/from/your/file/var";, or use --load-path option (see https://sass-lang.com/documentation/cli/dart-sass#load-path) in your compiler arguments to specify a folder the compiler should look for .scss file in. Note that the folder path should be relative to compiler working directory (specified in file watcher Working directory: field)
Related
I want to compile my scss that that an #import rule remains present at the head of the css file. I've tried using #at-root to write a string or #{"#import url(...)"} but these end up trying to be imported and compiled. I've been up and down the documentation https://sass-lang.com/documentation/syntax but can't figure out how to output a raw string to the root.
input
#import url(http://some-file.com/foo.css);
.myclass {
p { font-weight: bold; }
}
how do you output a raw strig to the document root of the compiled output?
desired output
#import url(http://some-file.com/foo.css);
.myclass p { font-weight: bold}
I am using gulp-sass to compile SCSS, but received the following error message:
[19:51:38] 'sassTask' errored after 98 ms
[19:51:38] Error in plugin 'gulp-sass'
Message:
assets\scss\base\_typography.scss
Error: Undefined variable: "$color-grey-dark".
on line 6 of assets/scss/base/_typography.scss
from line 7 of assets/scss/main.scss
>> color: $color-grey-dark;
Here are my variables from scss/abstracts/_variables.scss
$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;
$color-grey-dark: #777;
$color-white: #fff;
$color-black: #000;
Here's where I used the $color-grey-dark in scss/base/_typography.scss which generated the error message:
body {
font-family: "Lato", sans-serif;
font-weight: 400;
/* font-size: 16px; */
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
box-sizing: border-box;
}
and here is my code from assets/scss/main.scss:
#import "abstracts/variables";
#import "abstracts/functions";
#import "abstracts/mixins";
#import "base/animations";
#import "base/base";
#import "base/typography";
#import "base/utilities";
#import "components/button";
#import "layout/header";
#import "pages/home";
I did put variables at the top of the list, since I read that the wrong order of your imports can create problems, but that didn't fix it.
How can I fix this error? Here is a link to the repo of the project in case that's helpful: https://github.com/chris-fretz/natours-project.
Seems to be a problem with your pathes ... ;-)
In your project on github you #import file _variables.scss from directory "abstracts/variables".
The file in that directory is empty!!!
The file _variables.scss with the variables you want to load is placed in assets directly. So you may try #import 'variables ... or just move the file with the variables to the right place.
Additional nice notice: in that situation it could be helpful to check the pathes for other files as well i.e. mixins, functions, ... ;-)
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;
}
}
My style.less imports Bootstrap 3 .less files and then customize some variables in order to output style.css:
#bs-less: "../../vendor/twbs/bootstrap/less";
// Core variables and mixins
#import "#{bs-less}/variables.less";
#import "#{bs-less}/mixins.less";
// Core CSS
#import "#{bs-less}/type.less";
// Customizations
#font-family-sans-serif: "Open Sans Condensed", sans-serif;
#font-size-base: 18px; // override working
#font-size-h1: floor(#font-size-base * 5); // originally 2.6 (46px) changed to 5
Customizing the #font-size-base variable works fine as #font-family-sans-serif.
The problem I'm getting is with #font-size-h1 (more generally with #font-size-h*), which is completely ignored, i.e 46px but should be around 90px. I changed the multiplication from 2.6 to 5.
I'm just start learning LESS, is there something I'm missing?
EDIT: in type.less variable #font-size-h1 is actually used:
h1, .h1 { font-size: #font-size-h1; }
#font-sizer: 10;
.test(#fs){font-size:#fs*5px;}
h1{.test(#font-sizer)}
#font-sizer: 20;
It seems the results depends on your compiler. Less compilers have different precedence rules maybe?
The above results with lessc 1.4.2 (LESS Compiler) [JavaScript] in: h1 {
font-size: 100px;
} alhought i can find a reason (unambiguous rule) why the result should not be h1 {
font-size: 50px;
}
Also see: https://github.com/twbs/bootstrap/issues/8947
i have a imported css font with the following code:
#font-face
{
font-family: font;
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
The problem is that online doesn't work but locally works.What is causeing the problem
Try renaming the file path, for example ---> "myriad-pro/myriad-pro/MyriadWebPro.ttf". Is your css file in the folder with the font. Check if your path is right.
P.S: Remove the bottom url (that on the third line.). When I use font-face I use only two. Example: font-family: Consolas;
src: url('Consolas.ttf');
#font-face
{
font-family: MyriadPro; /* just declares a font in your stylesheet */
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
body
{
/* now you need to use it */
font-family: MyriadPro, sans-serif;
/* so name it something useful, instead of just "font" */
}
answering old questions
for those who come looking after