3

When building my Angular project I now have this error: yourfile.scss exceeded the maximum budget. Budget 4.00 kB was not met by 435 bytes with a total of 4.42 kB for about 10 files.

I know that I can change the limit in my angular.json file but I don't really want to do it and would rather fix the problem.

But I'm pretty sure that my imports are done the right way and that my SCSS files are not too large (but I'm maybe wrong).

In most of my components I import 3 files: _colors.sccs, _variables.scss, _mixins.scss:

_colors.scss:

$primary: #23A892;
$primary-light: #EDF5F4;
$primary-gradient: linear-gradient(90deg, #23A892 73.33%, rgba(35, 168, 146, 0) 100%);

$white: #FFFFFF;
$black: #1F1F1F;

$grey-20: #EAEAEA;
$grey-30: #A1A1A1;
$grey-40: #898989;
$grey-50: #737373;
$grey-transparent: rgba(31, 31, 31, 0.1);

$red: #A82323;
$red-light: #F5EDED;

$background: #FAFAFA;

_variables.scss:

$small-mobile: 325px;
$mobile: 480px;
$big-mobile: 600px;
$tablet: 768px;
$laptop: 1024px;
$desktop: 1200px;

_mixins.scss:

@use "colors" as *;

@mixin font($size, $color, $weight: 550, $style: normal) {
    font-size: $size;
    color: $color;
    font-weight: $weight;
    font-style: $style;
}

@mixin flex($justify: flex-start, $align: stretch, $direction: row) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify;
    align-items: $align;
}

@mixin margin-horizontal($spacing) {
    margin-left: $spacing;
    margin-right: $spacing;
}

@mixin margin-vertical($spacing) {
    margin-top: $spacing;
    margin-bottom: $spacing;
}

@mixin padding-horizontal($spacing) {
    padding-left: $spacing;
    padding-right: $spacing;
}

@mixin padding-vertical($spacing) {
    padding-top: $spacing;
    padding-bottom: $spacing;
}

@mixin basic-shadow {
  box-shadow: 0 0 1rem 0.5rem rgba(0, 0, 0, 0.05);
}

@mixin hover-shadow {
    box-shadow: 0 0 1rem 0.5rem rgba(0, 0, 0, 0.2);
}

@mixin border($color, $size: 0.1rem) {
  border: $size solid $color;
}

@mixin outline-focus($color: $primary) {
    outline-color: $color;
    outline-style: auto;
    outline-width: 1px;
}

@mixin transition {
    transition: 0.250s;
}

@mixin capitalize {
    &:first-letter {
        text-transform: uppercase;
    }
}

Then, in my components I'm importing these files like that (only if they need the 3 of them):

@use "mixins" as *;
@use "colors" as *;
@use "variables" as *;

... rest of my component CSS

Am I doing something wrong ?

PepeW
  • 477
  • 1
  • 8
  • 24
  • 1
    How about tree-shake unused CSS using tools like PurgeCSS (https://stackoverflow.com/questions/58112925/how-to-integrate-purgecss-with-angular-cli-project)? – taylorswiftfan Jan 10 '22 at 01:36
  • Why not, I'll give it a try! But do you see any bad practice with my imports ? – PepeW Jan 10 '22 at 09:11
  • Personally I don't see a problem, but I am interested to hear what other members have to say. – taylorswiftfan Jan 10 '22 at 19:35
  • In the hindsight, the only reason I mentioned to use PurgeCSS is I believe mundane things like minifying/reducing "stuff" file size in general should just be outsourced to 3rd party tools. My first comment doesn't technically help with your question. – taylorswiftfan Jan 10 '22 at 19:37

0 Answers0