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?
Related
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";
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 just installed a fresh Laravel 5.4, and bootstrap 4 alpha 6. Laravel mix wont compile SASS:
Here is one error:
Module build failed: ModuleBuildError: Module build failed:
$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
^
Incompatible units: 'rem' and 'px'.
in /Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/bootstrap/scss/_variables.scss (line 444, column 34)
at runLoaders (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/webpack/lib/NormalModule.js:192:19)
at /Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.asyncSassJobQueue.push [as callback] (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/lib/loader.js:57:13)
at Object.<anonymous> (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:2262:31)
at apply (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:20:25)
at Object.<anonymous> (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:56:12)
at Object.callback (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:944:16)
at options.error (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/node-sass/lib/index.js:294:32)
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Someone passed this? And how?
Solved
remove the bootstrap entry from package.json and replace it with
"bootstrap": "4.0.0-alpha.6", in resources/assets/sass/app.scss,
comment out the import of variables. change the path of bootstrap to
#import "node_modules/bootstrap/scss/bootstrap.scss";
in resources/assets/js/bootstrap.js, look for require('bootsrap-sass');
and change it to require('bootstrap');
Link!
It happened to me too, it's like you said, the override of some variables is the cause of this error.
To fix this just comment this line in resources/assets/sass/_variables:
$font-size-base: 14px;
In the variables if you need are using other variables that laravel provides.
reference: https://github.com/twbs/bootstrap/issues/18368
Just change the
$font-size-base: 14px;
to
$font-size-base: 0.875rem;
and run
npm run dev
I just fixed this on my side, what worked for me was moving the #import "bootstrap.scss.." and other variables to the top of the app.scss file, it seems it was overwritten and that is what caused the issue.
Hi everybody I'm new to learning Gulp and I can't seem to get over this hurdle. I am trying to compile my sass and I will set it to gulp-watch. It will work fine for a little while, but then it will show an error- the file is not found or unreadable.It looks something like:
events.js:154
throw er;// Unhandled 'error' event
Error: app/scss/main.sass
Error: File to import not found or unreadable: layout1
Parent style sheet: stdin on line 2 of stdin
I have tried to look on this site for the solution to my problem and I thought putting the includePaths would work (maybe I'm doing it wrong) but I'm still getting errors. Could someone please help me out?Here are some images of my project. Here is a link to some pictures: http://imgur.com/a/pQBHV
Looks like there are a few issues:
1) You should probably use the scss extension with all your files and update the sass task in your gulp file to watch for changes like so: gulp.src('app/scss/*.scss') or since, in theory, all files contained in that folder should be sass, you could do this instead: gulp.src('app/scss/*') which will watch all the files in the directory.
2) There's also an issue with the names of your sass files. You need to prepend the files you wish to import with an underscore so the compiler knows these files are partials.
So your sass files should look like:
_layout1.scss
main.scss
_normalize.scss
_styles.scss
And import the partials in main.scss:
#import 'normalize';
#import 'layout1';
#import 'styles';
More info http://sass-lang.com/guide#topic-4