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
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 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';
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.
Whenever I try to bundle exec jekyll build/serve I get the following error:
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss':
Undefined variable: "$output-bourbon-deprecation-warnings". on line 20
jekyll 3.6.0 | Error: Undefined variable: "$output-bourbon-deprecation-warnings". on line 20
I'm not even sure where to look, because this variable doesn't appear in the css/main.scss file.
Code for the css/main.scss file:
---
# Only the main Sass file needs front matter (the dashes are enough)
---
#charset "utf-8";
#import "variables";
// TOOLS
#import "reset";
#import "normalize";
#import "bourbon/bourbon";
#import "neat/neat";
// GLOBAL
#import "base";
#import "layout";
// COMPONENTS
#import "header";
#import "footer";
#import "carousel";
#import "post-index";
// PAGE
#import "posts";
// CUSTOM
#import "custom";
I believe that the main use of it is for a prefixer. When I try to comment out bourbon entirely I get more errors. I've also tried removing and then reinstalling the gems.
Depending on how correctly the original theme you're using was configured, this is likely due to the gemfile not being locked down tight enough to the point that it allowed breaking changes.
Add the following to your SCSS file:
$output-bourbon-deprecation-warnings: false;
This must be added before #import boutbon;.
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.