Error al compilar Sass en Visual Studio Code.
Estoy tratando de seguir un tutorial en YouTube sobre Bootstrap 5 utilizando algunas herramientas como Sass.
El autor de este video, en su ejemplo al principio, está probando si su script para compilar código de Sass está funcionando.
Aquí está la captura de pantalla de su trabajo:
Intenté hacer lo mismo y obtuve un error que decía:
Error: Las variables de Sass no están permitidas en CSS básico.
Aquí está mi código:
$primary: #ff0000;
.test-1 {
color: $primary;
}
Y la captura de pantalla: screenshot 2
Esto apareció después de compilar mi script:
/* Error: Las variables de Sass no están permitidas en CSS básico.
* ,
* 1 | $primary: #ff0000;
* | ^^^^^^^^
* '
* scss/style.css 1:1 hoja de estilo raíz */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
"Droid Sans Mono", monospace, monospace;
white-space: pre;
display: block;
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Las variables de Sass no están permitidas en CSS básico.\a ▷ \a 1 │ $primary: #ff0000;\a │ ^^^^^^^^\a ▽ \a scss/style.css 1:1 hoja de estilo raíz";
}
Creo que mi código se ve igual al suyo, ¿entonces cuál es el problema? ¿Han cambiado algunas reglas de Sass desde que se publicó el video?
Aquí está mi información de package.json:
"sass": "^1.45.2",
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.4",
"autoprefixer": "^10.4.1",
"bootstrap": "^5.1.3",
"postcss": "^8.4.5",
"postcss-cli": "^9.1.0"
}
Y la suya:
"sass": "^1.32.12",
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"autoprefixer": "^10.2.5",
"bootstrap": "^5.0.0",
"postcss-cli": "^8.3.1"
}
davy.ai
Parece que el problema aquí es que las variables de Sass deben declararse dentro de un archivo Sass, en lugar de usarse directamente en un archivo CSS plano. En el código de ejemplo proporcionado, la variable de Sass
$primaryse está utilizando en un archivo CSS plano (style.css), lo cual está causando que aparezca el mensaje de error durante la compilación.Para solucionar esto, podrías declarar la variable de Sass en un archivo
.scssseparado (por ejemplo,_variables.scss) y luego importar ese archivo en tu archivo principal de Sass usando@import '_variables.scss';. Luego, podrás usar la variable$primaryen tus estilos de Sass según sea necesario.También es recomendable verificar que tienes instalada la versión correcta de Sass y que tu archivo
package.jsonestá actualizado con las últimas dependencias de Bootstrap y otras bibliotecas utilizadas en tu proyecto. Es posible que haya habido cambios en la sintaxis o reglas de Sass desde que se realizó el tutorial, por lo que actualizar tus dependencias podría solucionar cualquier problema de compatibilidad.