¿Importar un archivo CSS normal en un archivo SCSS?

Solución:

Después de tener el mismo problema, me confundí con todas las respuestas aquí y los comentarios sobre el repositorio de sass en github.

Solo quiero señalar que en diciembre de 2014, este problema se ha resuelto. Ahora es posible importar css archivos directamente en 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 una extensión después del nombre del archivo. Esto importará su archivo directamente. Si anexas *.css al final, se traducirá en el css regla @import url(...).

En caso de que esté utilizando algunos de los nuevos paquetes de módulos “elegantes”, como webpack, probablemente necesitará usar use ~ al comienzo del camino. Entonces, si desea importar la siguiente ruta node_modules/bootstrap/src/core.scss escribirías algo como
@import "~bootstrap/src/core".

NOTA:
Parece que esto no funciona para todos. Si su intérprete se basa en libsass eso deberían estar trabajando bien (mira esto). He probado usando @import en node-sass y está funcionando bien. Desafortunadamente, esto funciona y no funciona en algunas instancias de ruby.

Esto se implementó y fusionó a partir de la versión 3.2 (tire # 754 fusionado en 2 de enero de 2015 por libsass, los problemas se definieron originalmente aquí: sass# 193 # 556, libsass# 318).

Para abreviar la historia larga, la sintaxis a continuación:

1. para importar (incluir) el archivo CSS sin procesar

   la sintaxis es sin .css extensión al final (da como resultado la lectura real de s[ac]ss|css e incluirlo en línea con SCSS / SASS):

   @import "path/to/file";

2. para importar el archivo CSS de forma tradicional

   la sintaxis va de forma tradicional, con .css extensión al final (resultados a @import url("path/to/file.css"); en su CSS compilado):

   @import "path/to/file.css";

Y es muy bueno: esta sintaxis es elegante y lacónica, además de compatible con versiones anteriores. Funciona excelentemente con libsass y node-sass.

__

Para evitar más especulaciones en los comentarios, escriba esto explícitamente: Rubí basado Hablar con descaro a todavía tiene esta característica no implementado después de 7 años de discusiones. En el momento de escribir esta respuesta, se promete que en 4.0 habrá una forma sencilla de lograr esto, probablemente con la ayuda de @use. Parece que habrá una implementación muy pronto, el nuevo “planificado” Se asignó la etiqueta “Propuesta aceptada” para el número 556 y la nueva @use característica.

La respuesta podría actualizarse tan pronto como cambie algo..

Debe anteponer un guión bajo al archivo css que se incluirá y cambiar su extensión a scss (por ejemplo: _yourfile.scss). Entonces solo 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.

---

---

Utiliza Nuestro Buscador