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?
Related
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;
Full Error:
Failed to compile.
./src/#core/scss/react/libs/noui-slider/noui-slider.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-0-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-0-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-0-4!./src/#core/scss/react/libs/noui-slider/noui-slider.scss)
SassError: $color: theme-color("primary") is not a color.
╷
23 │ "lighten-5": lighten(theme-color("primary"), 25%),
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/#core/scss/base/core/colors/palette-variables.scss 23:18 #import
src/#core/scss/base/core/colors/palette-noui.scss 11:9 #import
src/#core/scss/react/libs/noui-slider/noui-slider.scss 3:9 root stylesheet
To be clear, once I switched all occurrences of theme-color("primary") to the actual color(#0074d9, blue color I found from Bootstrap documentation which is the supposed primary color) across the SCSS files, it then gave me the same error for theme-color("secondary") which were in proceeding lines of the files. I'm working off a template and this is the import at the top of the files this error is coming from:
// Overrides user _variables-components
#import '../../bootstrap-extended/include';
This leads to the following file presumably made by the template maker:
// Functions
#import 'bootstrap/scss/functions'; // Bootstrap core function
#import 'functions'; // Bootstrap extended function
// Variables
#import 'scss/variables/variables'; // Bootstrap custom variable override (for user purpose)
#import 'variables'; // Bootstrap extended variable override
#import 'bootstrap/scss/variables'; // Bootstrap core variable
// Mixins
#import 'bootstrap/scss/mixins'; // Bootstrap core mixins
#import 'mixins'; // Bootstrap extended mixins
package.json:
"bootstrap": "5.1.3",
"sass-loader": "^12.2.0"
Maybe I should downgrade bootstrap? Should I try to override the variables that don't work in my palette-variables.scss file under $theme-colors like some articles recommend despite the theme already trying to do that?
I haven't yet gotten this react project up and running locally, which is the goal, and this seems to be the last group of errors to plow through before getting the development server running since when running npm start it'd say "starting up the development server", open up localhost:3000 and almost work.
I just used yarn to install the modules and everything worked completely fine.
I've set my own react project with typescript and react and my own webpack config. Hence I did or did not something somewhere wrong and I can't figure out what.
My problem is that I can't import my images.
I've tried the solutions from those guides but to no avail: https://medium.com/better-programming/how-to-display-images-in-react-dfe22a66d5e7
My setup is as follows:
src > assets/components/theme index.tsx custom.d.ts
assets > img > Logo.png
components > different folders for components & App.tsx
Index.tsx and custom.d.ts are next to each other.
In my webpack config I have this:
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
}
In my custom.d.ts file I have this:
declare module '*.jpg'
declare module '*.png'
declare module '*.jpeg'
declare module '*.gif'
I am trying to import the file like this: import Logo from '../../assets/img/Logo'
I am getting this error: Cannot find module '../../assets/img/Logo' or its corresponding type declarations.ts(2307)
Please let me know if you need additional information.
Thanks!
You have asset/resource in your config, but said your structure is assets/img, try changing asset to assetsin your config, or creating the path asset/resource.
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.
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)