I have a Problem when running npm run prod on a Laravel, VueJS APP.
#npm run dev works well but prod say's:
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
JisonLexerError: Lexical error on line 1: Unrecognized text.
Erroneous area:
1: none - 1px
^..^
at /Users/*/Work/*/resources/sass/app.scss:3801:3
at Object.parseError (/Users/*/Work/*/node_modules/postcss-calc/dist/parser.js:1200:15)
at Object.lexer_parseError [as parseError] (/Users/*/Work/*/node_modules/postcss-calc/dist/parser.js:2333:44)
at Object.lexer_next [as next] (/Users/*/Work/*/node_modules/postcss-calc/dist/parser.js:3328:22)
Is there a way to get more output from npm by processing to find the line of code which is affected here? When I google, I can only find this error in old Bootsrap Versions like 4.* but that seems not the same solution here. On the Bootstrap side, they want me to get them debugging output so that they can be shure it came from bootstrap not my setup.
I use bootstrap like this in my scss files:
app.scss:
@charset "UTF-8";
@use "sass:math";
// 1. Utils/Abstracts - variables, functions, mixins
@import "utils/variables";
@import "utils/mixins";
@import "utils/functions";
// 2. Vendors
@import "vendors/bootstrap/bootstrap";
@import "vendors/bootstrap/bootstrapicons";
after this came my own CSS stuff...
The bootstrap file looks like this:
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "~bootstrap/scss/functions";
// 2. Include any !default variable overrides for Bootstrap here
@import "./variables";
// 3. Include remainder of required Bootstrap stylesheets
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
// 4. Include any optional Bootstrap CSS as needed
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
//@import "~bootstrap/scss/tables";
//@import "~bootstrap/scss/nav";
//@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/placeholders";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/offcanvas";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/accordion";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/helpers";
// overwrite and extend some utilities
@import "./utilities";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "~bootstrap/scss/utilities/api";
// 6. Add additional custom code here
// the project code needs to be placed after this
Maybe it is clearly if there is a more detailed debugging output if I ran. npm run prod, to find the problem and solve it.
Thanks for each Hint you gave me.
Marcel