Base css being compiled 15 times into style.css!

[starchild]

For some reason, when gulp is compiling, I'm seeing what looks liek the base css in the file around 15 times.

The file is nearly 4mb!!

These are the contents of style.scss

@use 'base' with (
$breakpoints: (
'xs': 32rem, // ~512px
'sm': 48rem, // ~768px
'md': 64rem, // ~1024px
'lg': 80rem, // ~1280px
'xl': 90rem // ~1440px
),
$grid-columns: 12
);

/*! purgecss start ignore /
@use 'custom-style';
@use 'components/**/.scss';
@use 'custom-components';

/*! purgecss end ignore */

@import 'box';
@import 'base';
@import 'custom-style';
@import 'components';
@import 'custom-components';
@import 'cartt';
@import 'font-awesome';
@import 'usernoise';
@import 'simple_menu';
@import 'owl';
@import 'navigation';

What am I doing wrong please?

[sebastiano-guerriero]

Hi, you're importing the same files multiple times. The @use 'base' on top is used to import the base files. You're importing it a second time using @import 'base'. The custom style is imported twice, and so are the components.

[starchild]

Sorry for being such a noob.

So, when the component scss file start with @use.. /base.scss is that also importing base again?

[sebastiano-guerriero]

no prob :) Yes, the @use (or @forward) is how you import SCSS files if you're using the new SASS modules. In CodyFrame v3, we use the new SASS modules. If you prefer using @import, feel free to use CodyFrame v2.9.1. All the components are compatible with both CodyFrame versions.

[sebastiano-guerriero]

more info here: https://sass-lang.com/documentation/at-rules/use

[starchild]

Thank you. I've moved to 2.91 and things seem much better now.

[sebastiano-guerriero]

perf! 👍