I am install sass lib in my React project.
I created a main.sass file where I included other sass files by type of color_variables. These variables are visible in this file, but when I import the main.sass file itself into JS files and try to access the variables through it, I get an error that the variable was not found. I didn't include sass in webpack dependencies, wanted to try without it.
main.sass
#import "color_variables"
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;500;600;700&display=swap')
*
margin: 0
padding: 0
body
margin: 0
padding: 0
font-family: 'Nunito Sans', sans-serif
background: $background
color_variables.sass
$black:#1c1c1c
$accent: #cc33ff
$grey:#bab3bc
$borders: #e1dfe2
$background: #fafafa
$white:#ffffff
Error when trying to access a variable while main.sass is imported
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable
You need to export the variable. Below is the example.
//colors
$black: #000000;
$white: #ffffff;
$zanah: #e0efdc;
$aquaDeep: #02433c;
$whiteSand : f6f6f6;
:export {
zanah: $zanah;
}
you should use #use instead of #import
#use 'color_variables' as CV;
then add those variables like this..
background: CV.$background;
Related
I'm trying to use (e.g. $Dark-color:#333) SCSS from my main SCSS file to another SCSS file with the help of #use module.
my main file scss
_Style.scss
$Dark-Violet: hsl(256, 26%, 20%);
and my other scss file which I'm using this #use module
#use 'base';
.firstSection {
background-color: base.$Dark-Violet;
}
showing the below error when I'm using this module.
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
1 │ #use 'base';
│ ^^^^^^^^^^^
╵
src\Style\Section.scss 1:1 root stylesheet**
how to get off this error? Also, Can it run if I use SCSS module styling in react?
Shouldn't it be
#use 'Style';
.firstSection {
background-color: Style.$Dark-Violet;
}
I mean, your base file seems to be called "_Style.scss" not "_base.scss", am I missing something?
In my React app, I have a file called _variables.scss with the following code. It contains variables that I want to use in all my .scss files:
$navy: #264653;
$green: #2A9D8F;
$yellow: #E9C46A;
$orange: #F4A261;
$red: #E76F51;
$title-font: "Arial Rounded MT Bold", sans-serif;
$text-font: "Raleway", sans-serif;
I want to use the variables in another .scss file. This is my code in the other file:
#use './design/variables' as v;
* {
font-family: v.$text-font;
}
However, instead of recognizing the variable, my React app returns the following error:
I have already checked that the path of the file is the correct one.
How can I fix this error?
I am assuming you are using Node-Sass as most are. #use is only supported by Dart-Sass yet and probably forever. The announcement that #import would be depricated was made 5 years ago.
Heya so I realised the Sass team discourages use of #import (https://sass-lang.com/documentation/at-rules/import) so I've tried to use #use.
I'm very new to using Sass in React (discouraged from using Styled-components which I'm more familiar with). When trying to import a variable to my InputBar.module.scss I get this error:
Failed to compile
./src/stylesheets/modules/InputBar.module.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-6-4!./src/stylesheets/modules/InputBar.module.scss)
SassError: Invalid CSS after "...nt-family: vars": expected expression (e.g. 1px, bold), was ".$contentfont;"
on line 7 of /Users/Jamming/_projekt/_kod/timeatask/client/src/stylesheets/modules/InputBar.module.scss
>> font-family: vars.$contentfont;
-------------------^
So yeah, not sure what to do, I've tried everything. Pretty sure I've set up everything wrong or my way of working with Scss + React is completely off. Have a look at my code:
stylesheets/modules/_vars.scss
$primaryBG: #f0f7ff;
$h1font: 'Montserrat Subrayada';
$contentfont: Montserrat, sans-serif;
stylesheets/modules/InputBar.module.scss
#use 'vars';
.container {
[...]
font-family: vars.$contentfont;
}
Components/InputBar.js
import styles from '../stylesheets/modules/InputBar.module.scss'
[...]
<form className={styles.container}
which works fine when I remove this from InputBar.module.scss
font-family: vars.$contentfont;
I also have a stylesheets/main.scss which
#import './modules/vars.scss';
So. where am I completely lost? please enlighten me :-)
edit: project is bootstrapped with create-react-app
edit: + node-sass
Might've found an answer to my problem. #use keyword isn't supported in node-sass yet.
https://github.com/sass/node-sass/issues/2886
I think I will have to stick with #import.
I want to set a simple background image with an overlay to a react component from a sass file, but I am getting this error, Module not found: You attempted to import ../assets/hero.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported., this is very strange as the assets folder that contains the image is actually inside the /src folder, here is my folder structure
src/
|assets/
hero.jpg
|sass/
|main.scss
|sassFiles/
|components.scss
|..
|components/
|Navbar.js
|Home.js
|..
|App.js
|index.js
|..
/* _components.scss file */
.hero {
height: 60vh;
background: linear-gradient(rgba(238, 238, 238, 0.459)), url(../../assets/hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
when I import the image from the component like so import hero from '../assets/hero.jpg', it works fine,
the error occurs only when I import it from the .scss file, other than that, styles are being applied with no problems.
What error are you seeing in the web inspector? Trying changing the relative path to your image from:
url(../../assets/hero.jpg)
To:
url(../assets/hero.jpg)
We are trying to implement custom fonts to our sencha app by using the Bruno tutorial. (http://bruno.tavares.me/sencha-touch/adding-custom-font-icons-to-sencha-touch-2-2/). However, I'm encountering problems with including the fonts.
This is our scss file:
$base-color: #FF9600;
$toolbar-base-color: $base-color !default;
#include icon-font('app_fill', inline-font-files(
'app_fill/app_fill_all.woff', woff,
'app_fill/app_fill_all.ttf', truetype,
'app_fill/app_fill_all.svg', svg
));
#include icon("menu" , "\e009", "app_fill");
#include icon("star" , "\e001", "app_fill");
$toolbar-gradient:false;
$list-bg-color: #ffffff;
$list-active-color: #f8f8f8 !default;
$list-pressed-color: $list-active-color;
$panel-border-radius: 0em;
$sheet-bg-gradient: #ffffff;
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
#include sencha-button-ui('segment', #007aff, false);
#include sencha-toolbar-ui('segment', #007aff, false);
Now We are getting an error on line 8:
error app.scss (Line 8: Undefined mixin 'icon-font'.)
I can't figure out what is wrong. Both the tutorial and mij touch are version 2.2.1 compass is running properly.
Import the base mixins before using icon-font:
#import 'sencha-touch/base';