React, Sass, getting an error when importing img from a .scss file - reactjs

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)

Related

why #use 'base' is not working in SCSS in React?

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?

Using variables outside of sass files in a React project

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;

How do I override the custom font in the Hugo book theme?

So I am building a site with the hugo-book theme. The docs here (under Extra Customization) say to create scss files under ./assets, while the theme submodule itself stores its css defaults under ./theme/hugo-book/assets.
Following this logic I created an scss file at ./assets/_fonts.scss:
/* merriweather-regular - latin */
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
src: local(''),
url('fonts/merriweather-v28-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/merriweather-v28-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* merriweather-italic - latin */
#font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
src: local(''),
url('fonts/merriweather-v28-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/merriweather-v28-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
font-family: 'Merriweather', sans-serif;
}
but hugo is still picking up the default roboto font from the theme directory. The fonts are stored under ./static/fonts and the hugo compiler seems to be picking up the changes.
Should I instead be making changes to the hugo-theme submodule and not worrying about it? That doesn't seem right. Searching the internet shows references to a custom_css params entry in config.toml but it would be pointing to ./assets - is this not the default?
Asking here before I ask the hugo-book author, in case I am missing something simple.
You have to create an assets folder from the root of your theme. This assets folder should not be inside any other folder.
For the fonts, create a folder by the name of static and inside of that create another one by the name of fonts and put your web fonts inside of it.
For the fonts to work, paste the font stylesheet into _custom.scss partial and change the URL path there. After that these should work without any issues.
Note: the static folder shouldn't be inside another folder.
assets
_custom.scss
static/fonts
webfonts.woff

Unable to import sass variables from one scss file to another

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.

CakePHP AssetCompress plugin and fonts

I have a custom font imported into CSS with #font-face, which worked fine. When trying to use Mark Story's AssetCompress plugin, I included the CSS file in the .ini file. While the font works (for now, but it may be cached), I get an error.
Snippet of CSS file (the font directory is in the css directory):
...
#font-face {
font-family: 'ArvoRegular';
src: url('font/arvo-regular-webfont.eot');
src: url('font/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/arvo-regular-webfont.woff') format('woff'),
url('font/arvo-regular-webfont.ttf') format('truetype'),
url('font/arvo-regular-webfont.svg#ArvoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
...
Console error (Chrome):
GET http://localhost/.../cache_css/font/arvo-bold-webfont.woff 404 (Not Found)
Why is this error occurring and how to I get rid of it? Also, I get a CakePHP NotFoundException when visiting that URL in the browser, which is why I think the font is working from cache now.
Edit
The full (real) path is: http://localhost/_active/website-under-development/css/font/arvo-regular-webfont.eot and the homepage is at http://localhost/_active/website-under-development/
The directory structure for the webroot is:
/webroot/
|--css/
|----font/
|------arvo-regular-webfont.eot
|------other font files...
|----main.css
|----other CSS files...
Make urls relative to the webroot
The default configuration for the asset compress plugin has the cache folders at the same level as the source folders:
[General]
cacheConfig = false
[js]
cachePath = WEBROOT/cache_js/
[css]
cachePath = WEBROOT/cache_css/
Therefore the folder structure is as follows:
app
webroot
cache_css
cache_js
css
js
img
Instead of defining urls relative to the location of the file - define them relative to the webroot:
/* /css/some.css */
#font-face {
font-family: 'ArvoRegular';
src: url('../css/font/arvo-regular-webfont.eot');
/* /css/some/other.css */
#font-face {
font-family: 'ArvoRegular';
src: url('../../css/font/arvo-regular-webfont.eot');
This permits font files/images in css files to be found however they are accessed. I.e. All of the following css files would find the right font files:
http://localhost/myproject/css/some.css
http://localhost/myproject/css_cache/123123.css
http://localhost/myclient/myproject/css/some.css
http://localhost/myclient/myproject/css_cache/123123.css
http://myproject.dev/css/some.css
http://myproject.dev/css_cache/123123.css
http://cdn.myproject.com/version123/css_cache/123123.css
You need to be careful with relativly linked assets. If its images or fonts.
The paths wont match after compressing and storing those files in a different location ("cache_css" folder in your case).
So always link your assets relative to root (not the current file) to avoid this.
From root (for http://www.domain.de/ it's / - the part after the domain) it will always be accessible with the same url, thus always be reachable, no matter where the final compressed css will be located at.
// if the file is in WEBROOT/css/font/
url('/css/font/arvo-regular-webfont.svg#ArvoRegular')
PS: and try to avoid those localhost setups. use vhosts and a local url like "my.website.local" etc.

Resources