I am new to SASS and React.js. I have scoured many answers on this platform and cannot seem to spot my issue. I have a partial file _variables.scss which looks like the following:
// Fonts
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');
$raleway-font: 'Raleway', sans-serif;
I have imported this into my App.scss, along with my other scss files like:
// Utilities
#import 'styles/variables';
// Stylesheets
#import '~bootstrap/scss/bootstrap';
#import 'components/navigationBar/navbar';
#import 'components/main/main';
#import 'components/main/mostRecent/mostRecent';
#import 'components/main/mostRecent/recentCard/recentCard';
#import 'components/main/featuredCard/featuredCard';
But when I try to use the variable in any of the files, for example featuredCard.scss - I am given the error:
SassError: Undefined variable: "$raleway-font".
Note that I have used create-react-app, and installed "node-sass": "^4.14.1".
I am importing my files into the jsx files with import './featuredCard.scss';.
Does anyone know why this is happening?
Apparently you are incorrectly importing the address of the variable,
#import 'styles/variables';
A way to check that you are not correctly placing the address of variables.scss , is copying the code in 'components / main / featuredCard / featuredCard';
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');
$raleway-font: 'Raleway', sans-serif;
//code featuredCard
And comment #import 'styles/variables';
Related
I have a Problem when running npm run prod on a Laravel, VueJS APP.
#npm run dev works well but prod say's:
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
JisonLexerError: Lexical error on line 1: Unrecognized text.
Erroneous area:
1: none - 1px
^..^
at /Users/*/Work/*/resources/sass/app.scss:3801:3
at Object.parseError (/Users/*/Work/*/node_modules/postcss-calc/dist/parser.js:1200:15)
at Object.lexer_parseError [as parseError] (/Users/*/Work/*/node_modules/postcss-calc/dist/parser.js:2333:44)
at Object.lexer_next [as next] (/Users/*/Work/*/node_modules/postcss-calc/dist/parser.js:3328:22)
Is there a way to get more output from npm by processing to find the line of code which is affected here? When I google, I can only find this error in old Bootsrap Versions like 4.* but that seems not the same solution here. On the Bootstrap side, they want me to get them debugging output so that they can be shure it came from bootstrap not my setup.
I use bootstrap like this in my scss files:
app.scss:
#charset "UTF-8";
#use "sass:math";
// 1. Utils/Abstracts - variables, functions, mixins
#import "utils/variables";
#import "utils/mixins";
#import "utils/functions";
// 2. Vendors
#import "vendors/bootstrap/bootstrap";
#import "vendors/bootstrap/bootstrapicons";
after this came my own CSS stuff...
The bootstrap file looks like this:
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
#import "~bootstrap/scss/functions";
// 2. Include any !default variable overrides for Bootstrap here
#import "./variables";
// 3. Include remainder of required Bootstrap stylesheets
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
#import "~bootstrap/scss/utilities";
// 4. Include any optional Bootstrap CSS as needed
#import "~bootstrap/scss/root";
#import "~bootstrap/scss/reboot";
#import "~bootstrap/scss/type";
#import "~bootstrap/scss/images";
#import "~bootstrap/scss/containers";
#import "~bootstrap/scss/grid";
//#import "~bootstrap/scss/tables";
//#import "~bootstrap/scss/nav";
//#import "~bootstrap/scss/navbar";
#import "~bootstrap/scss/forms";
#import "~bootstrap/scss/placeholders";
#import "~bootstrap/scss/buttons";
#import "~bootstrap/scss/button-group";
#import "~bootstrap/scss/dropdown";
#import "~bootstrap/scss/modal";
#import "~bootstrap/scss/close";
#import "~bootstrap/scss/transitions";
#import "~bootstrap/scss/list-group";
#import "~bootstrap/scss/breadcrumb";
#import "~bootstrap/scss/alert";
#import "~bootstrap/scss/toasts";
#import "~bootstrap/scss/progress";
#import "~bootstrap/scss/badge";
#import "~bootstrap/scss/tooltip";
#import "~bootstrap/scss/popover";
#import "~bootstrap/scss/spinners";
#import "~bootstrap/scss/offcanvas";
#import "~bootstrap/scss/card";
#import "~bootstrap/scss/accordion";
#import "~bootstrap/scss/carousel";
#import "~bootstrap/scss/pagination";
#import "~bootstrap/scss/helpers";
// overwrite and extend some utilities
#import "./utilities";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
#import "~bootstrap/scss/utilities/api";
// 6. Add additional custom code here
// the project code needs to be placed after this
Maybe it is clearly if there is a more detailed debugging output if I ran. npm run prod, to find the problem and solve it.
Thanks for each Hint you gave me.
Marcel
I'm trying to learn Laravel and I've run into an issue that I can't seem to figure out with Google Fonts and Sass.
I'm trying to load my font on app.scss with:
// Fonts
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
But it compiles to app.css as:
#import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;
700&display=swap);#charset "UTF-8";
If I manually correct app.css it works. But how do I get Sass or Laravel to compile it properly?
This is caused by a known bug in Webpack which appears to be still open.
Details here: https://github.com/webpack/webpack/issues/10873
I solved it by modifying it as follows:
original:
#import url ("https://fonts.googleapis.com/css2?family=Rubik:wght#400;700&display=swap");
modified:
#import url ("https://fonts.googleapis.com/css2?family=Rubik:400,700");
I using scss in my project to import scss files.
For example I have file with variables (that using everywhere in my project)
And I have desktop.scss for importing files into it
Like this
#import 'variables';
#import 'desktop/_style';
#import 'desktop/index';
#import 'desktop/step_1';
#import 'desktop/step_2';
#import 'desktop/step_3';
#import 'desktop/step_4';
According to this issue
Link
It will be deprecated.
But what I can use instead of it?
Any suggestions?
This issue is only about importing CSS into a SCSS file. From your code I assume, that you only use SCSS Files, so you won't have a problem with that in future.
I'm using rails 5.1.4, bourbon 3.2.3 and neat 1.8.0 gems, sass-rails: 5.0.7, bootstrap-sass: 3.3.7 in gemfile. I have one page specific file and one custom.css file. I have my page specific file setup like this:
#import "bootstrap-sprockets";
#import "bootstrap";
#import "normalize";
#import "bourbon";
#import "neat";
#import "base/grid-settings";
#import "base/variables";
#import "base/forms";
#import "base/global";
#import "layout/header";
#import "layout/footer";
I have defined all my variables in the _variables.scss file. However, I am getting error:
ActionView::Template::Error (Undefined variable: "$base-line-
height".). undefined variable, #include box-sizing, undefined $primary-color.
I can't use any of the variables I have defined in my variable.css.scss file. It seems like sass, bourbon and neat are not correctly importing into the files. I'm not sure what I'm doing wrong. I have seen similar questions and answers like the one I have but none worked for me. I need help here - thank you
When I import partial files on style.scss. It's working fine. All variables working fine.
style.scss
#import 'base/variable';
//Component
#import 'component/menubar';
#import 'component/menubar-mascot';
#import 'component/menubar-count';
#import 'component/menubar-button';
But when I try to merge menubar scss partial files, like this
style.scss
#import 'base/variable';
//Component
#import 'component/menubar';
menubar.scss
#import 'menubar-mascot';
#import 'menubar-count';
#import 'menubar-button';
The variable on variable.scss it cannot readable, but when I import again the variable.scss on menubar.scss, like this
menubar.scss
#import '../base/variable';
#import 'menubar-mascot';
#import 'menubar-count';
#import 'menubar-button';
it's working fine, why? and how to fix this without import again the variables.scss on menubar.scss?
I assume menubar-mascot is located where you ran the sass command.
For some reason absolute path in nested imports doesn't seem to be found.
#import 'menubar-mascot';
#import 'menubar-count';
#import 'menubar-button';
However if you use a relative one it does find it. So relative to your bundle scss file you can do:
#import '../menubar-mascot';
#import '../menubar-count';
#import '../menubar-button';
Thus it will go back from component folder back to the root and find the correct files.