codyhouse / codyhouse-framework

A lightweight front-end framework for building accessible, bespoke interfaces.
https://codyhouse.co/
MIT License
1.16k stars 173 forks source link

Error: There's already a module with namespace "base" - upgrading to V3 #104

Closed JonQuayle closed 2 years ago

JonQuayle commented 2 years ago

Having made the switch to Codyframe V3 I am getting this error in my terminal when changing the default breakpoints:

Message:
    src/assets/scss/style.scss
Error: There's already a module with namespace "base".
    ╷
1   │ ┌ @use 'base' with (
2   │ │   $breakpoints: (
3   │ │     'xs': 32rem, // ~512px
4   │ │     'sm': 48rem, // ~768px
5   │ │     'md': 64rem, // ~1024px
6   │ │     'lg': 80rem, // ~1280px
7   │ │     'xl': 90rem  // ~1440px
8   │ │   ),
9   │ │   $grid-columns: 8
10  │ │ );
    │ └─^ original @use
... │
13  │   @use 'base';
    │   ^^^^^^^^^^^ new @use

This isn't something that I use often, but I can't seem to find a way around applying a different number of grid columns or changing the default breakpoints without throwing an error. Google has not brought up anything on this. As a FYI, I am importing the base style files from node_modules. Am I putting this in the correct place? I have changed the name of the base sass file, which is importing the base stylesheet from node_modules and that does not fix the error. style.scss file is as follows:

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

/*! purgecss start ignore */
@use 'base';
@use 'custom-style';
@use 'components';
/*! purgecss end ignore */

Thanks

claudia-romano commented 2 years ago

Hi Jon, you are importing twice the base files; you should import it only once and modify the values of breakpoints/grid columns according to your project needs:

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

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

Let me know if you have other questions. Cheers!

JonQuayle commented 2 years ago

Ahhh I see now! I did not realise they were the both imports. Thank you for clearing that up @claudia-romano!