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.
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.
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 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
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';