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';
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.
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.
My sass-compass project is not compiling
Here is my gulp.js file:
gulp.task('compass', function() {
return gulp.src(['src/sass/**/*'])
.pipe(compass({
config_file: 'config.rb',
css: 'assets/styles',
sass: 'src/sass',
image: 'assets/images'
}))
.pipe(gulp.dest('assets/styles'));
});
gulp.task('watch', function() {
gulp.watch('src/sass/**/*', ['compass']);
});
This is my folder structure:
foundation/
components/
//Some unloaded components that needed top load
_functions.scss // Unloaded
_settings.scss // Unloaded
_foundation.scss // Like as my application.sass file
_normalize.scss // Loaded
application.sass // Import files
common.sass // Included compass and my mixins (mixins produces error)
defaults.sass
layout.sass
media.sass
mixins.sass // My mixins
topbar.sass
media.sass
And this is my application.sass file:
#import compass
#import vars
#import mixins
#import foundation/foundation
#import common
#import defaults
#import ui
#import layout
#import topbar
#import media
Here is error from command line:
error src/sass/common.sass (Line 2: Undefined mixin 'boxModel'.)
Compilation failed in 1 files.
events.js:72
throw er; // Unhandled 'error' event
^
Error: error src/sass/common.sass (Line 2: Undefined mixin 'boxModel'.)
Compilation failed in 1 files.
Common.sass:
/*
Error: Undefined mixin 'boxModel'.
on line 2 of C:/WebServers/home/sportparad.loc/www/src/sass/common.sass, in `boxModel'
from line 2 of C:/WebServers/home/sportparad.loc/www/src/sass/common.sass
1: span.highest
2: +boxModel(1px, 100%)
3: +inline-block
Backtrace:
C:/WebServers/home...
What i need to do to normally compile my project?