Common Problems
SASS missing rule properties
After compiling, sass sometimes misses parts of rules if there is no space before an operator. To fix this, ensure that there is a space before all operators. For example, this:
width: calc(var(--width)/ 2);
Can be fixed by adding a space before the / like this:
width: calc(var(--width) / 2);
diff:
‘undefined’ after compliation
Sometimes when compiling into production, it won’t load certain pages due to Laravel Mix having problems Uglifying the code. This cause the failing file to be combiled to a single line of “undefined”, which can be identified by either loading the compiled file, or checking the result of npm run prod to see if there are any files with a 10 byte file size.
This can be caused by a number of problems, some of which are listed here.
null-coalescing operator
Using the null-coalescing operator (??) is not handled by uglify, and so should be avoided. So instead of using this:
return {
label: address.name ?? address.formattedAddress
};
Use this instead:
address.name || address.formattedAddress
OR
return {
label: address.name ? address.name : address.formattedAddress
};
Class properties outside of a function
Properties for a class which are defined outside of a function cannot be uglified either. So instead of doing this:
export default class Foo {
a;
b = 1;
}
Do this:
export default class Foo {
constructor(){
this.a;
this.b = 1;
}
}
Object optional chaining ? operator
FIXED IN MixV6 -> updated 08/2021
e.g. this will not uglify when npm run prod is executed:
this.constraintLayers?.forEach(l => {
if (l.layer) {
l.hide();
}
});
instead use something like:
if (this.constraintLayers) {
this.constraintLayers.forEach(l => {
if (l.layer) {
l.hide();
}
});
}
Incorrect CSS calcs
Having multiple calculations in a single calc or multiple calc in the same property can cause it to combine them when compiled for production. Therefore, they should be splt up. For exampl, instead of this, which has three calculations inside a single calc:
--width: 100px;
width: calc(var(--width) / 2 - var(--padding) * 2);
Use this, which splits it up and puts it in separate variables:
--width: 100px;
--buttonWidth: calc(var(--width) / 2);
--buttonPadding: calc(var(--padding) * 2);
width: calc(var(--buttonWidth) - var(--buttonPadding));
Similarily, instead of having a calc inside another calc:
left: calc(50% + calc(var(--width) / 2));
Separate them out into a var first:
left: calc(50% + var(--buttonWidth));
Top comments (0)