I have error after npm run dev if I add following code in my _mobmenu.scss partial
When this part of code is commented I have no errors.
@keyframes openbt {
from { :before { content: '\f0c9'; } }
to { :before { content: '\e804'; } }
}
@keyframes closebt {
from { :before { content: '\f0c9'; } }
to { :before { content: '\e804'; } }
}
.openbt:before {
animation: openbt 2s;
content: '\e804';
}
.closebt:before {
animation: closebt 2s;
content: '\f0c9';
}
I cannot understand which number is expected here.
ERROR Failed to compile with 2 errors 12:32:49
error in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
from { :before { content: '\f0c9'; } }
^
Expected number.
╷
14 │ from { :before{ content: '\f0c9'; } }
│ ^
╵
resources\sass\includes\_mobmenu.scss 14:10 @import
stdin 33:9 root stylesheet
in C:\laragon\www\lara7\resources\sass\includes\_mobmenu.scss (line 14, column 10)
at C:\laragon\www\lara7\node_modules\webpack\lib\NormalModule.js:316:20
at C:\laragon\www\lara7\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\laragon\www\lara7\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\laragon\www\lara7\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\laragon\www\lara7\node_modules\sass-loader\dist\index.js:89:7
at Function.call$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:87584:16)
at _render_closure1.call$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:77359:12)
at _RootZone.runBinary$3$3 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:25587:18)
at _RootZone.runBinary$3 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:25591:19)
at _FutureListener.handleError$1 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24041:19)
at _Future__propagateToListeners_handleError.call$0 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24337:40)
at Object._Future__propagateToListeners (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3497:88)
at _Future._completeError$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24165:9)
at _AsyncAwaitCompleter.completeError$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:23557:12)
at Object._asyncRethrow (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3253:17)
at C:\laragon\www\lara7\node_modules\sass\sass.dart.js:13333:20
at _wrapJsFunctionForAsync_closure.$protected (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3276:15)
at _wrapJsFunctionForAsync_closure.call$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:23578:12)
at _awaitOnObject_closure0.call$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:23570:25)
at _RootZone.runBinary$3$3 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:25587:18)
at _RootZone.runBinary$3 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:25591:19)
at _FutureListener.handleError$1 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24041:19)
at _Future__propagateToListeners_handleError.call$0 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24337:40)
at Object._Future__propagateToListeners (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3497:88)
at _Future._completeError$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24165:9)
at _AsyncAwaitCompleter.completeError$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:23557:12)
at Object._asyncRethrow (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3253:17)
at C:\laragon\www\lara7\node_modules\sass\sass.dart.js:15991:20
at _wrapJsFunctionForAsync_closure.$protected (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3276:15)
at _wrapJsFunctionForAsync_closure.call$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:23578:12)
at _awaitOnObject_closure0.call$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:23570:25)
at _RootZone.runBinary$3$3 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:25587:18)
at _RootZone.runBinary$3 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:25591:19)
at _FutureListener.handleError$1 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24041:19)
at _Future__propagateToListeners_handleError.call$0 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24337:40)
at Object._Future__propagateToListeners (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3497:88)
error in ./resources/sass/app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
from { :before { content: '\f0c9'; } }
^
Expected number.
╷
14 │ from { :before{ content: '\f0c9'; } }
│ ^
╵
resources\sass\includes\_mobmenu.scss 14:10 @import
stdin 33:9 root stylesheet
in C:\laragon\www\lara7\resources\sass\includes\_mobmenu.scss (line 14, column 10)
@ ./resources/sass/app.scss 2:14-256
Asset Size Chunks Chunk Names
/js/app.js 7.11 MiB /js/app [emitted] /js/app
\css\app.css 262 KiB [emitted]
\js\app.js 7.11 MiB [emitted]
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
from { :before { content: '\f0c9'; } }
^
Expected number.
╷
14 │ from { :before{ content: '\f0c9'; } }
│ ^
╵
resources\sass\includes\_mobmenu.scss 14:10 @import
stdin 33:9 root stylesheet
in C:\laragon\www\lara7\resources\sass\includes\_mobmenu.scss (line 14, column 10)
at C:\laragon\www\lara7\node_modules\webpack\lib\NormalModule.js:316:20
at C:\laragon\www\lara7\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\laragon\www\lara7\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\laragon\www\lara7\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\laragon\www\lara7\node_modules\sass-loader\dist\index.js:89:7
at Function.call$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:87584:16)
at _render_closure1.call$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:77359:12)
at _RootZone.runBinary$3$3 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:25587:18)
at _RootZone.runBinary$3 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:25591:19)
at _FutureListener.handleError$1 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24041:19)
at _Future__propagateToListeners_handleError.call$0 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24337:40)
at Object._Future__propagateToListeners (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3497:88)
at _Future._completeError$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24165:9)
at _AsyncAwaitCompleter.completeError$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:23557:12)
at Object._asyncRethrow (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3253:17)
at C:\laragon\www\lara7\node_modules\sass\sass.dart.js:13333:20
at _wrapJsFunctionForAsync_closure.$protected (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3276:15)
at _wrapJsFunctionForAsync_closure.call$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:23578:12)
at _awaitOnObject_closure0.call$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:23570:25)
at _RootZone.runBinary$3$3 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:25587:18)
at _RootZone.runBinary$3 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:25591:19)
at _FutureListener.handleError$1 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24041:19)
at _Future__propagateToListeners_handleError.call$0 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24337:40)
at Object._Future__propagateToListeners (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3497:88)
at _Future._completeError$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24165:9)
at _AsyncAwaitCompleter.completeError$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:23557:12)
at Object._asyncRethrow (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3253:17)
at C:\laragon\www\lara7\node_modules\sass\sass.dart.js:15991:20
at _wrapJsFunctionForAsync_closure.$protected (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3276:15)
at _wrapJsFunctionForAsync_closure.call$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:23578:12)
at _awaitOnObject_closure0.call$2 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:23570:25)
at _RootZone.runBinary$3$3 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:25587:18)
at _RootZone.runBinary$3 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:25591:19)
at _FutureListener.handleError$1 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24041:19)
at _Future__propagateToListeners_handleError.call$0 (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:24337:40)
at Object._Future__propagateToListeners (C:\laragon\www\lara7\node_modules\sass\sass.dart.js:3497:88)
@ ./resources/sass/app.scss
ERROR in ./resources/sass/app.scss (./node_modules/css-loader/dist/cjs.js??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
from { :before { content: '\f0c9'; } }
^
Expected number.
╷
14 │ from { :before{ content: '\f0c9'; } }
│ ^
╵
resources\sass\includes\_mobmenu.scss 14:10 @import
stdin 33:9 root stylesheet
in C:\laragon\www\lara7\resources\sass\includes\_mobmenu.scss (line 14, column 10)
@ ./resources/sass/app.scss 2:14-256
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Anastasia\AppData\Roaming\npm-cache\_logs\2020-05-17T09_32_51_476Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Anastasia\AppData\Roaming\npm-cache\_logs\2020-05-17T09_32_51_521Z-debug.log
This is my package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-react": "^7.0.0",
"@fortawesome/fontawesome-free": "^5.12.0",
"autoprefixer": "^9.7.3",
"axios": "^0.19",
"bootstrap": "^4.5.0",
"cross-env": "^5.1",
"css-mqpacker": "^7.0.0",
"cssnano": "^4.1.10",
"jquery": "^3.5.1",
"laravel-mix": "^5.0.4",
"laravel-mix-postcss-config": "^1.0.4",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"postcss-loader": "^3.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "7.*",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-directive-long-press": "^1.1.0",
"vue-loader": "^15.9.2",
"vue-router": "^3.1.3",
"vue-template-compiler": "^2.6.11",
"vuelidate": "^0.7.4",
"webpack": "^4.43.0"
},
"dependencies": {
"@rdebeasi/flexmenu": "^1.6.2",
"clean-css-cli": "^4.3.0",
"cleave.js": "^1.5.3",
"css-loader": "^3.5.3",
"ekko-lightbox": "^5.3.0",
"laravel-mix-clean-css": "^1.3.1",
"laravel-mix-imagemin": "^1.0.3",
"lg-autoplay": "^1.0.4",
"lg-fullscreen": "^1.1.0",
"lg-hash": "^1.0.4",
"lg-pager": "^1.0.2",
"lg-share": "^1.1.0",
"lg-thumbnail": "^1.1.0",
"lg-video": "^1.2.2",
"lg-zoom": "^1.1.0",
"lightgallery": "^1.6.12",
"portal-vue": "^2.1.7",
"sass-flex-mixin": "^1.0.3",
"slick-carousel": "^1.8.1",
"vue-the-mask": "^0.11.1",
"vue-toasted": "^1.1.27",
"vuex": "^3.4.0"
}
}
The problem in your code is your scss syntax, no need to mention before after in keyframes, as you already applied the animation on same.
Make it correct like this.
@keyframes openbt {
from {
content: '\f0c9';
}
to {
content: '\e804';
}
}
@keyframes closebt {
from {
content: '\f0c9';
}
to {
content: '\e804';
}
}
.openbt{
&:before {
animation: openbt 2s;
content: '\e804';
}
}
.closebt{
&:before {
animation: closebt 2s;
content: '\f0c9';
}
}
Chek this running Example
@-webkit-keyframes changeLetter {
0% {
content: "1";
}
100% {
content: "2";
}
}
@keyframes changeLetter {
0% {
content: "1";
}
100% {
content: "2";
}
}
.element {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
min-height: 100vh;
}
.element:after {
-webkit-animation: changeLetter 3s linear infinite alternate;
animation: changeLetter 3s linear infinite alternate;
display: block;
content: "A";
font-size: 80px;
}<div class="element"></div>the above running example is in CSS, here is the SCSS for the same, doesn't matter its CSS or SCSS, logic will remain same.
@keyframes changeLetter {
0% {
content: "1";
}
100% {
content: "2";
}
}
.element {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
&:after {
animation: changeLetter 3s linear infinite alternate;
display: block;
content: "A";
font-size: 80px;
}
}