we are upgrading our Angular app from version 11 to 12. Now we are running into an issue with the scss for our themes...
#use '~#angular/material' as mat;
#function mat.get-color-from-palette($palette,$hue:default,$opacity:null) {
#if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
#return mat.get-color-from-palette($palette, default, $hue);
}
while this worked fine for 11 version 12 throws an error.... :
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "(".
╷
3 │ #function mat.get-color-from-palette($palette,$hue:default,$opacity:null) {
│ ^
╵
Any idea ?
Best, Peter
We found it. Got fixed :
#function mat-get-color-from-palette($palette,$hue:default,$opacity:null) {
mat-get vs mat.get
Related
I would like to import scss files from bootstrap in my NX workspace.
I would need to import the /node_modules/bootstrap/scss/functions file in the libs/folderName/components/src/lib/my-component component
In the scss file I have this:
#import "/node_modules/bootstrap/scss/functions";
in the my-app/project.json file:
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/bootstrap/scss"
]
}
but when I run the application, I get an error on build:
Error in ./libs/folderName/components/src/lib/my-component/my-component.component.scss?ngResource
The module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: cannot find a styleset to import.
╷
2 │ #import "functions
"
│ ^^^^^^^^^^^
How to import bootstrap scss into a library in NX?
Can anyone help with this gulp-sass error.
I'm trying to run Google's code labs which includes package gulp-sass.
[01:02:31] 'build:scss' errored after 117 ms
[01:02:31] Error in plugin "gulp-sass"
Message:
app/styles/_categories.scss
Error: Expected identifier.
╷
50 │ %bg-#4285f4{
│ ^
╵
app/styles/_categories.scss 50:8 codelab-card()
app/styles/_categories.scss 79:1 #import
app/styles/_codelab-card.scss 18:9 #import
app/styles/main.scss 22:9 root stylesheet
Details:
formatted: Error: Expected identifier.
╷
50 │ %bg-#4285f4{
│ ^
I also encountered this problem when trying to run gulp-sass to serve the Google Codelabs example site
The problem
The sass interpolation syntax in line 50 looks like this:
%bg-#{$color}
Which unwraps $color inplace, yielding
.bg-#XXXXXX
Notice that the character '#' is an invalid indentifier in css
The fix
Convert the color to a string and then strip out the hex value (As explained in this answer)
$stripped-color: str-slice(inspect($color), 2);
%bg-#{$stripped-color} {
background-color: $color;
}
...
In laravel 9/Inertiajs 3/vuejs 3 app I add ckeditor5 (with Composition API)
reading https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/vuejs-v3.html with code :
<ckeditor
:editor="editor"
v-model="editorData"
:config="editorConfig"
></ckeditor>
...
let editorData = ref(' editorData init text')
let editor = ref(ClassicEditor)
let editorConfig = ref({})
I have error :
ckeditor.js?fbec:5 TypeError: Cannot read properties of undefined (reading 'model')
at Proxy.$_setUpEditorEvents (ckeditor.js?fbec:5:4617)
at eval (ckeditor.js?fbec:5:4054)
Searching in net I found branch : TypeError: Cannot read properties of undefined (reading 'model') at Proxy.$_setUpEditorEvents
I upgrated vuejs to the latest version :
$ npm -v
6.14.15
$ node -v
v14.18.3
npm list vue
/ProjectPath/
├── vue#3.2.31
└─┬ vue3-colorpicker#2.0.4
└─┬ vue3-normal-library#0.1.6
└── vue#3.2.31 deduped
What I see in debugging vue :
https://prnt.sc/vrlktjNrlNIM
but I still have the same error
Any ideas ?
Thanks in advance!
I am trying to install all the dependencies of a Laravel Vue Project.
From the Instruction, it says I need to run npm run dev.
Now when I run this I am receiving
> ERROR in ./resources/js/src/#core/scss/vue/libs/toastification.scss
> (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./node_modules/sass-loader/dist/cjs.js??ref--11-0!./resources/js/src/#core/scss/vue/libs/toastification.scss)
> Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
> SassError: Undefined function. ╷ 63 │ margin-left:
> -(math.div($vt-toast-max-width, 2)); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵
> node_modules/vue-toastification/src/scss/_toastContainer.scss 63:22
> #import resources/js/src/#core/scss/vue/libs/toastification.scss
> 25:9 root stylesheet #
> ./resources/js/src/#core/scss/vue/libs/toastification.scss 2:14-314 #
> ./resources/js/src/libs/toastification.js #
> ./resources/js/src/main.js # ./resources/js/app.js # multi
> ./resources/js/app.js ./resources/scss/app.scss
I have searched to solve this problem and some people suggested that in the package-lock.json file there are sass dependencies where I need to provide a resolved link to it. But when I check my sass package I found this -
"sass": {
"version": "1.32.13",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
"integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
"dev": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0"
},
Now I have no idea where to look and how to solve this problem!
Any IDEA???
try to delete everything in toastification.scss and if it works, then you're having just a syntax error
I noticed that sass build fails on color substraction after update to laravel-mix#4.0.12
My code in app.scss
.footer {
background-color: #fefefe - #a0a0a0
}
My webpack.mix.js
const mix = require('laravel-mix');
const resourcesAssets = 'resources/assets/';
const dest = 'public/assets/';
mix
.sass(`${resourcesAssets}scss/app.scss`, `${dest}css`);
On laravel-mix#1.7.2 running npm run prod works properly, but now I got next error
ERROR Failed to compile with 2 errors22:16:34
error in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Undefined operation "#fefefe - #a0a0a0".
background-color: #fefefe - #a0a0a0
^^^^^^^^^^^^^^^^^
stdin 2:23 root stylesheet
in C:\xampp\htdocs\laravel-test-mix\resources\sass\app.scss (line 2, column 23)
at runLoaders (C:\xampp\htdocs\laravel-test-mix\node_modules\webpack\lib\NormalModule.js:301:20)
at C:\xampp\htdocs\laravel-test-mix\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\xampp\htdocs\laravel-test-mix\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\xampp\htdocs\laravel-test-mix\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at render (C:\xampp\htdocs\laravel-test-mix\node_modules\sass-loader\lib\loader.js:52:13)
at Function.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:25378:48)
at vB.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:16223:16)
at tz.ve (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9275:42)
at tz.vd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9277:32)
at ic.uo (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8583:46)
at t6.$0 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8728:7)
at Object.eu (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1569:80)
at aj.bd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8646:3)
at is.bd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8576:25)
at is.cF (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8563:6)
at oy.cF (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8350:35)
at Object.o (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1442:19)
at C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:5284:51
at w0.a (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1453:71)
at w0.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8365:23)
at uC.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8360:25)
at tz.ve (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9275:42)
at tz.vd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9277:32)
at ic.uo (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8583:46)
at t6.$0 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8728:7)
at Object.eu (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1569:80)
at aj.bd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8646:3)
at is.bd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8576:25)
at is.cF (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8563:6)
at oy.cF (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8350:35)
at Object.o (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1442:19)
at C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:5835:52
at w0.a (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1453:71)
at w0.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8365:23)
at uC.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8360:25)
at tz.ve (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9275:42)
How can I fix this problem without setting up previously calculated value?
Color arithmetic was deprecated in dart-sass 4.
They recommend you (in a harsh way) to use color functions.
I rather like this color functions visual summary. You are probably looking for darken(color,%) in your code.