1

Estoy intentando cambiar los @import de esta hoja de estilo.scss por @use excepto el "@import url(..fonts..)". La siguiente hoja.scss es de la documentaión de BULMA, de la parte de customize con with Sass CLI; lo importante es que al cambiar el @import por @use y ponerlo al inicio del archivo como se sugiere, me sale un error, como muestro más abajo.

@charset "utf-8";

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

// Import only what you need from Bulma
@import "../bulma/sass/utilities/_all.sass";
@import "../bulma/sass/base/_all.sass";
@import "../bulma/sass/elements/button.sass";
@import "../bulma/sass/elements/container.sass";
@import "../bulma/sass/elements/title.sass";
@import "../bulma/sass/form/_all.sass";
@import "../bulma/sass/components/navbar.sass";
@import "../bulma/sass/layout/hero.sass";
@import "../bulma/sass/layout/section.sass";

    // Import only what you need from Bulma
@use "../bulma/sass/utilities/_all.sass";
@use "../bulma/sass/base/_all.sass";
@use "../bulma/sass/elements/button.sass";
@use "../bulma/sass/elements/container.sass";
@use "../bulma/sass/elements/title.sass";
@use "../bulma/sass/form/_all.sass";
@use "../bulma/sass/components/navbar.sass";
@use "../bulma/sass/layout/hero.sass";
@use "../bulma/sass/layout/section.sass";

En el siguiente archivo solo se pone los @use al inicio:

    // Import only what you need from Bulma
@use "../bulma/sass/utilities/_all.sass";
@use "../bulma/sass/base/_all.sass";
@use "../bulma/sass/elements/button.sass";
@use "../bulma/sass/elements/container.sass";
@use "../bulma/sass/elements/title.sass";
@use "../bulma/sass/form/_all.sass";
@use "../bulma/sass/components/navbar.sass";
@use "../bulma/sass/layout/hero.sass";
@use "../bulma/sass/layout/section.sass";


@charset "utf-8";

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

Y me sale el siguiente error en la terminal:

Error: There's already a module with namespace "all".
  ╷
3 │ @use "../bulma/sass/utilities/_all.sass";
  │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original @use
4 │ @use "../bulma/sass/base/_all.sass";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new @use
  ╵
  src\sass\custome.scss 4:1  root stylesheet

NOTA: estoy usando sass en windown con Chocolatey.

2 respuestas 2

1

El método @use a diferencia del clásico @import, maneja los estilos importados como módulos, especificando un namespace con el parámetro as _nombre_, cuando no se especifica un namespace por defecto lo define el nombre de archivo (p.e. _all => all), como hay más de un archivo con el mismo nombre salta el error que se indicas.

Para eliminar los namespaces y que @use funcione como @import, agrega el comodín as * a tus imports.

@use "../bulma/sass/utilities/_all.sass" as *;
@use "../bulma/sass/base/_all.sass" as *;
@use "../bulma/sass/elements/button.sass" as *;
@use "../bulma/sass/elements/container.sass" as *;
@use "../bulma/sass/elements/title.sass" as *;
@use "../bulma/sass/form/_all.sass" as *;
@use "../bulma/sass/components/navbar.sass" as *;
@use "../bulma/sass/layout/hero.sass" as *;
@use "../bulma/sass/layout/section.sass" as *;
1
  • 1
    +1, además otra alternativa es usar @use "path/file.sass" as <namespace>; donde <namespace> puede ser cualquier letra/palabra. Más info
    – Marcos
    Commented el 21 feb. 2022 a las 0:23
0

aplicando lo que recomienda la respuesta de @Vlady sale el siguiente error:

    Error: This variable is available from multiple global modules.
╷
2   │     @use "../bulma/sass/utilities/_all.sass" as *;
│     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ includes va
riable
3   │     @use "../bulma/sass/base/_all.sass" as *;
│     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ includes variable
4   │     @use "../bulma/sass/elements/button.sass" as *;
│     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ includes variable
5   │     @use "../bulma/sass/elements/container.sass" as *;
│     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ includes variable
6   │     @use "../bulma/sass/elements/title.sass" as *;
│     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ includes variable
7   │     @use "../bulma/sass/form/_all.sass" as *;
│     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ includes variable
8   │     @use "../bulma/sass/components/navbar.sass" as *;
│     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ includes variable
9   │     @use "../bulma/sass/layout/hero.sass" as *;
│     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ includes variable
10  │     @use "../bulma/sass/layout/section.sass" as *;
│     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ includes variable
... │
18  │     $purple: #8A4D76;
│     ^^^^^^^^^^^^^^^^ variable use
╵
  src\sass\custome.scss 18:5  root stylesheet

No se como esta escrito BULMA; creo que mejor mandare los @import a una nueva _hoja.scss y luego lo llamare con @use.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.