SCSS 文件太大

Question

在构建我的 Angular 项目时，我现在遇到此错误：yourfile.scss 超出了最大预算。 435 字节无法满足 4.00 kB 的预算，大约 10 个文件总共 4.42 kB。

我知道我可以更改 angular.json 文件中的限制，但我真的不想这样做，而是想解决问题。

但是我很确定我的导入是以正确的方式完成的，并且我的 SCSS 文件不是太大（但我可能是错的）。

在我的大多数组件中，我导入 3 个文件：_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;
    }
}

然后，在我的组件中，我将像这样导入这些文件（仅当他们需要其中 3 个时）：

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

... rest of my component CSS

我做错了什么吗？

Answer 1

你做得对，重要的是

@use

而不是

@import

，但你已经在这里了。

优化代码的一种方法是使用 css 变量。

这样做，您可以完全删除

@use

。

所以

$small-mobile: 325px;

成为

:root {
  --small-mobile: 325px;
}