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.
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.
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 have a big project with a lot of sass files (and all of them import a main sass file with some varibales and classes).
I belive you all know the problem that the file that i am import in all of my css files is duplicate in the main css file after buiding the project.
i tried using ExtractTextPlugin options and plugin that called OptimizeCssAssetsPlugin, and i didnt find solution for this problem.
Here is the plugins array in my webpack prod config:
new ExtractTextPlugin({
filename: "styles.css",
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
canPrint: true
}),
anyone know the solution for this problem?
thank you!
Less users are in luck! #import (reference) does exactly what it that:
Use #import (reference) to import external files, but without adding the imported styles to the compiled output unless referenced.
However in Stylus /Sass, there is no direct way to import by reference:
The closest you will get is a silent class / placeholder. These work a little different to how LESS and reference work, you can read more on them here: http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass
Refernce: Rerernce
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.