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
Related
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
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 developing a Laravel project running on localhost with php artisan serve, when I run npm run watch command to compile sass code I get the error Expected ":". at the beginning of the app.scss
The error is:
$import url('https://fonts.googleapis.com/css?family=Nunito');
^
Expected ":".
╷
2 │ $import url('https://fonts.googleapis.com/css?family=Nunito');
│ ^
╵
stdin 3:9 root stylesheet
in C:\Users\user\Documents\myApp\resources\sass\app.scss (line 3, column 9)
the app.scss first 6 lines are:
// Fonts
$import url('https://fonts.googleapis.com/css?family=Nunito');
$import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
// Variables
$import 'variables';
I don't see where are missing the ":". I never used ":" in the #import directive
What am I missing? why am I getting this error? How to solve it?
Laravel 5.8.35
Windows 10 pro 17763.737
PHP Version 7.1.29
Composer version 1.8.5
It should be an # in front of the import:
#import url('https://fonts.googleapis.com/css?family=Nunito');
https://sass-lang.com/documentation/at-rules/import
Variables have an $ in front of them and need : after them to give them a value. The compiler thinks you are creating an $import variable in your case, that's why it expects a :.
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";