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
.