¿Importar un archivo CSS normal en un archivo SCSS?
¿Existe alguna forma de importar un archivo CSS normal con @importel comando de Sass? Si bien no estoy usando toda la sintaxis SCSS de sass, todavía disfruto de sus funciones de combinación/compresión y me gustaría poder usarla sin cambiar el nombre de todos mis archivos a *.scss.
Después de tener el mismo problema, me confundí con todas las respuestas aquí y los comentarios en el repositorio de sass en github.
Solo quiero señalar que en diciembre de 2014, este problema se resolvió. Ahora es posible importar cssarchivos directamente a su archivo sass. El siguiente PR en github resuelve el problema.
La sintaxis es la misma que ahora - @import "your/path/to/the/file", sin extensión después del nombre del archivo. Esto importará su archivo directamente. Si agrega *.cssal final, se traducirá en la cssregla @import url(...).
En caso de que esté utilizando algunos de los nuevos paquetes de módulos "elegantes", como webpack , probablemente necesitará utilizar use ~al comienzo de la ruta. Entonces, si desea importar la siguiente ruta, node_modules/bootstrap/src/core.scssescribiría algo como @import "~bootstrap/src/core".
NOTA:
Parece que esto no funciona para todos. Si su intérprete se basa en libsassél, debería funcionar bien (consulte esto ). Probé su uso @importen node-sass y está funcionando bien. Lamentablemente, esto funciona y no funciona en algunas instancias de Ruby.
Esto se implementó y fusionó a partir de la versión 3.2( el extracto #754 se fusionó el 2 de enero de 2015libsass , los problemas se definieron originalmente aquí: # sass193 #556 , libsass#318 ).
Para abreviar la historia, la sintaxis es la siguiente:
para importar (incluir) el archivo CSS sin formato
la sintaxis es **sin extensión `.css`** al final (da como resultado una lectura real de `s[ac]ss|css` parcial y su inclusión en línea en SCSS/SASS):@import "path/to/file";importar el archivo CSS de forma tradicional
la sintaxis va de manera tradicional, **con la extensión `.css`** al final (resulta en `@import url("ruta/al/archivo.css");` en tu CSS compilado):@import "path/to/file.css";
Y es muy bueno: esta sintaxis es elegante y lacónica, ¡y además es compatible con versiones anteriores! Funciona excelentemente con libsassy node-sass.
__
Para evitar más especulaciones en los comentarios, escriba esto explícitamente: Sass basado en Ruby todavía tiene esta característica sin implementar después de 7 años de discusiones. Al momento de escribir esta respuesta, se promete que en 4.0 habrá una forma sencilla de lograr esto, probablemente con la ayuda de . Parece que habrá una implementación muy pronto, la nueva etiqueta "planificada" "Propuesta aceptada" se asignó para el número 556 y la nueva característica.@use@use
UPD: el 26 de octubre de 2020, lib-sass quedó obsoleto , por lo que el número 556 se cerró inmediatamente .
__
La respuesta podría actualizarse tan pronto como algo cambie .
Parece que esto no está implementado, al momento de escribir este artículo:
https://github.com/sass/sass/issues/193
Para libsass (implementación C/C++), la importación funciona de *.cssla misma manera que para *.scsslos archivos: simplemente omita la extensión:
@import "path/to/file";
Esto importará path/to/file.css.
Consulte esta respuesta para obtener más detalles.
Vea esta respuesta para la implementación de Ruby (sass gem)
Debe anteponer un guión bajo al archivo css que se incluirá y cambiar su extensión a scss (por ejemplo _yourfile.scss:). Entonces sólo tienes que llamarlo de esta manera:
@import "yourfile";
E incluirá el contenido del archivo, en lugar de utilizar la directiva @import estándar de CSS.
Buenas noticias para todos, Chris Eppstein creó un complemento de brújula con funcionalidad de importación de CSS en línea:
https://github.com/chriseppstein/sass-css-importer
Ahora, importar un archivo CSS es tan fácil como:
@import "CSS:library/some_css_file"
