I have never actively used sass, but Google's Material Design is written so that I need sass. But I stumbled upon this error and can't find out what is wrong.
Error: Can't find stylesheet to import.
╷
26 │ #use '#material/feature-targeting/feature-targeting';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\#material\theme\_theme.scss 26:1 #forward
node_modules\#material\theme\_index.scss 17:1 #use
Line 26 in _theme.scss looks like this:
#use '#material/feature-targeting/feature-targeting';
This target file is from npm install #material/feature-targeting. Is there something wrong with the file _theme.scss from Google or did I do something wrong? (There is a file node_modules/#material/feature-target/_feature-target.scss. Is perhaps the underscore missing in line 26 in _theme.scss?)
The file I give to sass is this one:
#use "../node_modules/#material/theme" with (
$primary: #fcb8ab,
$secondary: #feeae6,
$on-primary: #442b2d,
$on-secondary: #442b2d,
);
#use "#material/button/mdc-button";
Related
I'm using some copied SASS code to start a project. It was written with #import for Ruby SASS, and I've changed it to #use for Dart SASS.
style.scss
// base
#use 'css/var' as *;
#use 'css/base' as *;
#use 'css/typography' as *;
// layouts
#use 'css/container' as *;
#use 'css/grid' as *;
css/_var.scss
$baseFontSize:16 !default;
$baseLineHeight:1.5 !default;
$leading:$baseLineHeight * 1rem !default;
from within the directory that style.scss is in, I ran sass --watch .
I keep getting the error:
Error: Undefined variable. ╷ 10 │ font-size: ($baseFontSize /
16) * 100%; │ ^^^^^^^^^^^^^ ╵
css/_typography.scss 10:17 #use
style.scss 6:1 root stylesheet
I'm using SASS version 1.43.4
If the _typography.scss partial uses Sass variables from css/_var.scss then you need to add a #use "path-to-css/_var.scss" as *; at-rule to the _tyopgraphy.scss partial. I reckon it wouldn't give an error anymore as it will know about that variable reference.
When you load css/_var.scss to the base stylesheet to be compiled you can use those variables in that style.scss file, but the partials being loaded into the main file will have to have #use at-rules if they use variables/mixins/etc and haven't been loaded already.
Note: You can also look into using index files with #use at-rules which allows you to load a directory of partials using a single #use call
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'm trying to use sass-bem-utils with Vuetify. Got an error
SassError: Invalid function name.
╷
563 │ #function _modifies-element($modified-elements...)
../node_modules/sass-bem-utils/dist/_sass-bem-utils.scss 563:1 #import
...
As I can see this is because Vuetify uses sass instead of node sass. Compiling styles using mixins from sass-bem-utils with node-sass works as it should.
Also I've noticed that removing underscore from function name fixes the problem.
So the question is why dart-sass throws an error when using underscore in function's name and node-sass does not?
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 :.