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;.
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 have updated my project from Bootstrap 4.5 to Bootstrap 5. I did this by simply overwriting all the old bootstrap files with npm install bootstrap#next. Now I have the problem that I can't use the bootstrap utilities anymore. They just don't seem to be compiled into the stylesheet, even though they are imported.
My app.scss file:
#import "variables";
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
#import "../node_modules/bootstrap/scss/grid";
#import "../node_modules/bootstrap/scss/utilities";
For example, if I now try to hide in element with .d-none, then this has no effect. The compiled stylesheet also does not contain a utility class.
There is a change in file structure in BS5 (vs. BS4).
The _utilities.scss file now only creates a variable $utilities holding all the ... utilities.
Another file utilities\_api.scss, when compiled, generates the utility CSS.
For your case use:
#import "../node_modules/bootstrap/scss/utilities";
#import "../node_modules/bootstrap/scss/utilities/api";
Make sure to read the docs on how the API works.
Do what they say in Bootstrap doc.
#import "../bootstrap/scss/functions";
#import "../bootstrap/scss/variables";
#import "../bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"border": map-merge(
map-get($utilities, "border"),
( responsive: true ), ),
)
);
#import "../bootstrap/scss/bootstrap";
always place your utilities before the bootstrap imported. and import the three files where also bootstrap mentioned in API.
In the last update you should use like this:
// Here is some overrided bootstrap variables.
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/maps";
#import "~bootstrap/scss/utilities";
// You can edit utilities here. Explained here https://getbootstrap.com/docs/5.0/utilities/api/#using-the-api
#import "~bootstrap/scss/utilities/api";
Also you can see tru order in the main bootstrap.scss file.
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'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'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