I'm learning SCSS following a freecodecamp tutorial, but I keep getting the following error on the CLI for live sass: watch:
Error: Undefined mixin.
╷
320 │ #include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 320:1 #use
node_modules\bootstrap\scss\bootstrap.scss 11:1 #import
scss\_custom.scss 58:8 #use
scss\style.scss 1:1
Could anyone that is more experienced in SASS point me in the right direction, I have no idea what to do from here. Do I need to add imports our #use to the custom.scss?
I had this problem. My issue was that I was importing in the wrong order:
#import '../node_modules/bootstrap/scss/mixins';
#import '../node_modules/bootstrap/scss/functions';
#import '../node_modules/bootstrap/scss/variables';
I got rid of it by changing it to
#import '../node_modules/bootstrap/scss/functions';
#import '../node_modules/bootstrap/scss/variables';
#import '../node_modules/bootstrap/scss/mixins';
You need these three imports in this specific order. You are probably missing one of the imports or wrote it in the wrong order too.
I just ran into this issue. You also need to include functions.css.
https://github.com/twbs/bootstrap/issues/23451
Related
I am trying to upgrade my angular version to 13 and after updating the version I am getting the below error in the sass files.
This is my sample code
#if $enable-light-style {
.light-style {
#import "../_appwork/include";
$ui-star-empty-color: $gray-200;
$ui-icon-border-color: $gray-100;
}
But I am getting the below error.
SassError: This at-rule is not allowed here.
╷
396 │ #import "../_appwork/include";
Could anyone help to resolve this problem?
Thanks in advance
I am using Parcel with SASS, and I am trying to use the material-components-web
(MDC Web).
In the guide of MDC Web they say you should import the modules that come with this package like this inside your stylesheets:
#import "#material/textfield/mdc-text-field";
But when I try this and I run parcel, I get this error message:
Can't find stylesheet to import.
╷
2 │ #import "#material/textfield/mdc-text-field";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
main.scss 2:9 root stylesheet
Error: Can't find stylesheet to import.
so when I change the line to the following, with the tilde operator
#import "~#material/textfield/mdc-text-field";
it finds the stylesheet to import, but the referenced stylesheet mdc-text-field, that is inside the nodes_modules, tries to load other stylesheets without the tilde operator, so I get an other error like this:
Can't find stylesheet to import.
╷
23 │ #import "#material/animation/variables";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\#material\textfield\mdc-text-field.scss 23:9 #import
main.scss 2:9 root stylesheet
Error: Can't find stylesheet to import.
So how can I fix this problem?
Create a .sassrc.js file and add the following lines.
const path = require('path')
const CWD = process.cwd()
module.exports = {
"includePaths": [
path.resolve(CWD, 'node_modules')
]
}
You can refer this
I hope this answer helps.
I am practicing sass in my code editor. When I tried to compile my sass file and built a watcher. I receive:
Jiatongs-MacBook-Pro:6_myLandingPage_starter jiatongli$ sass --watch sass:css
Error: Undefined variable.
background-color: $white
^^^^^^
sass/modules/_navbar.sass 3:21 #import
sass/modules/_modules-dir.sass 1:9 #import
sass/app.sass 3:9 root stylesheet
Because I cannoStackOverflow files here on stackoverflow, I link my github repository which is:
https://github.com/riederleeDEV/SASS-project.git.
It seems like the sass watcher cannot capture my file import and I do
not know where went wrong
Here is the command I used: sass --watch SASS:CSS(the command should not have any error)
After I checked the file, I discovered that there is nothing wrong with my app.sass import nor the typo. Just want to ask where I went wrong?
Try this:
<···· Move variables to top
#import "base/base-dir" |
#import "layout/layout-dir" |
#import "modules/modules-dir" |
|
#import "variables" ············
#import "mixins.sass"
I'm trying to run some tasks on my project with grunt, but for some reason I'm having an error pop up when running a sass task.
This is the error I'm receiving:
Running "sass:dist" (sass) task
Syntax error: File to import not found or unreadable: settings.
Load paths:
/Users/x/Desktop/WordPress/wp-content/themes/theme
/Users/x/Desktop/WordPress/wp-content/themes/theme/bower_components/foundation/scss
/Users/x/Desktop/WordPress/wp-content/themes/theme/sass
/Users/x/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/compass-0.12.7/frameworks/blueprint/stylesheets
/Users/x/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/compass-0.12.7/frameworks/compass/stylesheets
Compass::SpriteImporter
on line 6 of assets/sass/app.scss
Use --trace for backtrace.
My folders look like this, if it's of any help:
And my .scss file like this:
#import "normalize";
#import "settings";
#import "compass/css3";
#import "compass/css3/transform";
#import "compass/utilities";
It seems to #import normalize just fine, it's just having a problem with the settings file.
Any help with this is appreciated. Thanks in advance!
Normalize is a folder above settings. Did you try #import "foundation/settings";
I am using rails 3.1 rc6 and I have 2 files:
screen.css.sass
partials/_layout.css.sass
Screen 1, looks like this:
#import 'compass'
#include global-reset
#include reset-html5
#import "partials/utilities"
#import "partials/layout"
In _layout.css.sass which is a partial that I am importing from screen.css.sass, I want to use the pie-clearfix mixin which lives in:
compass/utilities/general/clearfix
I would have thought that I would not have to add an additional #import directive to the partial because I am importing the whole compass library in screen.css.sass.
But when I try to use it like this:
.group
#include pie-clearfix
I get the following error message:
Undefined mixin 'pie-clearfix'
The only way to get the _layout.css.sass file to render from the asset pipeline is to add the import to the _layout.css.sass:
#import "compass/utilities/general/clearfix"
It does not seem to be picking up the #import 'compass' from screen.css.sass.
Am I missing something or is this a bug?