Fabric sass not compile
chendjouCaleb opened this issue · 20 comments
Why I can not compile the Fabric.scss file
Hi @chendjouCaleb , can you please share more details about your environment (OS, node/npm version, etc), and what specific errors you're getting?
I use windows 10, npm version 6.9.0.
Here is a trace of the error when I try to compile the Fabric.scss file.
Error: $string: ms-fadeIn is not a string. ╷ 181 │ $namelist: append($namelist, unquote($newname), 'comma'); │ ^^^^^^^^^^^^^^^^^ ╵ node_modules\office-ui-fabric-core\dist\sass\mixins\_animation.mixins.scss 181:34 ms-animation() node_modules\office-ui-fabric-core\dist\sass\mixins\_animation.mixins.scss 209:5 @content node_modules\office-ui-fabric-core\dist\sass\mixins\_directionality.mixins.scss 11:5 ms-LTR() node_modules\office-ui-fabric-core\dist\sass\mixins\_animation.mixins.scss 208:3 ms-slideRightIn10() node_modules\office-ui-fabric-core\dist\sass\_animation.scss 13:3 @import node_modules\office-ui-fabric-core\dist\sass\fabric.scss 12:9 root stylesheet
Please I wait a response
Same here :-(
The file (_Animation.Mixins.MDL2scss) in which this error occurs is deprecated. You can solve the problem by remove the import of this file on the file _Animation.Mixins.scss.
but on every reinstall it would be reset to default. So this should be fixed. I can send a pr to fix this.
@viceice did you open a PR for this?
Not yet. Can do it the next days.
I updated node-sass, style-loader, sass-loader and it works
This error is encountered when used together with both Angular 8.x and Angular 9.
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
$namelist: append($namelist, unquote($newname), 'comma');
^
$string: ms-fadeIn is not a string.
╷
177 │ $namelist: append($namelist, unquote($newname), 'comma');
│ ^^^^^^^^^^^^^^^^^
╵
../../../node_modules/office-ui-fabric-core/dist/sass/mixins/_Animation.Mixins.MDL2.scss 177:34 ms-animation()
../../../node_modules/office-ui-fabric-core/dist/sass/mixins/_Animation.Mixins.MDL2.scss 205:5 @content
../../../node_modules/office-ui-fabric-core/dist/sass/mixins/_Directionality.Mixins.scss 11:5 ms-LTR()
../../../node_modules/office-ui-fabric-core/dist/sass/mixins/_Animation.Mixins.MDL2.scss 204:3 ms-slideRightIn10()
../../../node_modules/office-ui-fabric-core/dist/sass/_Animation.MDL2.scss 10:3 @import
../../../node_modules/office-ui-fabric-core/dist/sass/_Animation.scss 58:9 @import
../../../node_modules/office-ui-fabric-core/dist/sass/Fabric.scss 12:9 @import
stdin 8:9 root stylesheet
in /home/jostein/build/OutlookAddIn/OutlookAddIn/ClientApp/node_modules/office-ui-fabric-core/dist/sass/mixins/_Animation.Mixins.MDL2.scss (line 177, column 34)
Error:
$namelist: append($namelist, unquote($newname), 'comma');
^
$string: ms-fadeIn is not a string.
With submitted PR, this compilation-error goes away.
Add the latest version of node-sass to the project
Add the latest version of node-sass to the project
I'm using Angular 8.x and there is no direct (or indirect) dependency on node-sass, only on sass and sass-loader.
I'm able to upgrade sass via tweaking package-lock.json, but that doesn't fix the error.
Updating sass-loader (which is the component reporting the error here) doesn't seem to be possible, as package-lock.json keeps reverting to an older version.
Hopefully this PR will result in a newer version being made available which fixes this without any need for dirty hacks.
Add the latest version of node-sass to the project.
npm install node-sass
Will solve the problem.
Can confirm. That's amazing. Thanks for the feedback!
Updated the following packages, but still it doesn't work - have the same error with "@fluentui/react": "^7.149.4", and "office-ui-fabric-core": "^11.0.0"
success Saved 4 new dependencies.
info Direct dependencies
├─ node-sass@5.0.0
├─ sass-loader@10.0.5
├─ sass@1.29.0
└─ style-loader@2.0.0
I'm getting the same problem with the latest version of sass. I think this issue needs to be reopened, @lindalu-MSFT.
There are security concerns around using node-sass. Can this be upgraded to dart sass? Also if node-sass is really a dependency of office-ui-fabric-core then why is it not listed as a dependency of the project in the dependencies tab here? https://www.npmjs.com/package/office-ui-fabric-react
The above linked PR should fix the root cause of this error seen on dart-sass and other modern implementations. You can workaround it by patching locally:
// Outputs the properties for an animation.
@mixin ms-animation($names, $duration, $timing: $ms-animation-ease-1, $fillMode: both) {
// Set a default value for the version-scoped variable if it isn't assigned.
$ms-fabric-version-suffix: '' !default;
// Append the scoping suffix to each animation name.
$namelist: ();
@each $name in $names {
$newname: $name#{$ms-fabric-version-suffix};
$namelist: append($namelist, $newname, 'comma');
}
// Output the animation's properties.
animation-name: $namelist;
animation-duration: $duration;
animation-timing-function: $timing;
animation-fill-mode: $fillMode;
// Make the animation instant for users who prefer no motion.
@include ms-prefers-reduced-motion {
animation: none;
}
}None of the solutions above worked for me.
@KevinTCoughlin how should I patch it locally? Do you mean by changing the code inside my dependencies, or where should I put your mixin to properly overwrite the other one?