¿Importar archivos CSS normales en archivos SCSS?

509

¿Hay alguna forma de importar un archivo CSS normal con el @importcomando 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 renombrar todos mis archivos a * .scss

GSto
fuente
1
Sí, hay una manera: simplemente elimine la extensión '.css' en la ruta del archivo css en la declaración @input :) (funciona para la versión sass> = 3.2)
Kamil Kiełczewski
A partir de 2018, el uso de SASS@import en un archivo CSS normal debería generar un CSS @import regular . Eso significa una solicitud HTTP más y no combinar ni comprimir. Si algunas implementaciones se comportan de manera diferente, diría que es una característica no estándar que difiere de la especificación del lenguaje.
Álvaro González el

Respuestas:

215

Parece que esto no está implementado, al momento de escribir esto:

https://github.com/sass/sass/issues/193

Para libsass (implementación de C / C ++), la importación funciona de *.cssla misma manera que para los *.scssarchivos, solo omita la extensión:

@import "path/to/file";

Esto importará path/to/file.css.

Vea esta respuesta para más detalles.

Vea esta respuesta para la implementación de Ruby (sass gem)

Stephen Fuhry
fuente
23
@kleinfreund no es cierto con Sass 3.3.1. La @importdeclaración no cambia en absoluto y aparece en el archivo CSS resultante, Sass no incluye el archivo CSS referenciado como @GSto está pidiendo. Parece que se implementará en Sass 3.4 o 4.0
fregante
1
Si está utilizando Gulp o Grunt, simplemente use una herramienta diferente para importar sus archivos CSS, es más fácil y funciona ahora . Uso gulp-import-css , no estoy seguro de cuál es el equivalente de Grunt.
fregante
3
Funciona con libsassal menos. Vea la respuesta stackoverflow.com/questions/7111610/… y PR github.com/sass/libsass/pull/754
ivn
"Importar funciona de *.cssla misma manera que para los *.cssarchivos" es una tautología. Querías decir que uno de esos es *.scss, ¿verdad?
underscore_d
1
A partir de v3.5.3, libsass advierte que este es un comportamiento no estándar y que no se debe confiar en él. (En cambio, "Use un importador personalizado para mantener este comportamiento"). Github.com/sass/libsass/releases/tag/3.5.3
iX3
383

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 cssarchivos 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 agrega *.cssal final, se traducirá en la cssregla@import url(...) .

En caso de que esté utilizando algunos de los paquetes de módulos nuevos "sofisticados", como el paquete web , es probable que necesite usarlos ~al comienzo de la ruta. Entonces, si desea importar la siguiente ruta node_modules/bootstrap/src/core.scss, escribiría algo así
@import "~bootstrap/src/core".

NOTA:
Parece que esto no funciona para todos. Si su intérprete se basa en libsassél, debería estar funcionando bien (verifique esto ). Lo probé usando @importnode-sass y está funcionando bien. Desafortunadamente, esto funciona y no funciona en algunas instancias de ruby.

tftd
fuente
1
Esto parece implementarse, libsasspero cuando se usa la implementación ruby ​​de sass, parece que esta sintaxis funciona, pero solo si es sass-css-importernecesario. Al menos eso es lo que estoy viendo. ¿Alguien más puede confirmar esto?
bsara
55
¿Estás seguro de que tienes la última versión de sass? He estado usando esta sintaxis por un tiempo y funciona bien tanto con rubye nodejsintérpretes. ¿Ha verificado si no está colocando una extensión después del nombre del archivo? La sintaxis correcta es @import "path/to/style/file(sin la .cssextensión)
tftd
44
Estoy usando ruby ​​sass v3.4.18 (con Jekyll) de acuerdo con mi Gemfile.lock. Aún viendo Error: File to import not found or unreadable: cssdep/cssfile. Si creo un cssdep/cssfile.scss, de repente funciona. Entonces, no es un problema de ruta, por alguna razón todavía no puedo incluir archivos '.css' de SASS :(
thom_nic
1
ruby -v: ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32] sass -v: Sass 3.4.17 (Selective Steve)No trabajar aquí
Cyril CHAPON
55
¡Gracias por esto! Pude importar normalize.css usando node-sass con@import "node_modules/normalize.css/normalize";
Nick
260

Debe anteponer un guión bajo al archivo css que se incluirá y cambiar su extensión a scss (ej _yourfile.scss. :) . Entonces solo tienes que llamarlo así:

@import "yourfile";

E incluirá el contenido del archivo, en lugar de utilizar la directiva estándar @import de CSS.

David Morales
fuente
1
Tal vez sea algo sobre convenciones y estándares.
David Morales
70
El guión bajo es para evitar que se compile como un archivo separado.
Jonás
44
En caso de que alguien se lo pregunte, esto funciona porque la sintaxis SCSS de Sass es un superconjunto de CSS3. Por eso también se necesita el punto y coma.
Jacob Wan
46
No puede cambiar la extensión de algún archivo CSS de proveedor, por ejemplo.
Slava Fomin II
77
¡Si está en su computadora / servidor puede! Y también hay enlaces simbólicos si no lo desea.
ste
260

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

Para abreviar la larga historia, la sintaxis siguiente:

  1. importar (incluir) el archivo CSS sin procesar

    la sintaxis es sin.css extensión en el extremo (resultados en lectura real de parcial s[ac]ss|csse incluyen de ella en línea para SCSS / SASS):

    @import "path/to/file";

  2. importar el archivo CSS de forma tradicional

    La sintaxis va de la manera tradicional, con .cssextensión al final (resultados @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 libsassy node-sass.

__

Para evitar más especulaciones en los comentarios, escribir 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 manera simple de lograr esto, probablemente con la ayuda de . Parece que habrá una implementación muy pronto, se asignó la nueva etiqueta "planificada" "Propuesta aceptada" para el problema # 556 y la nueva función.@use@use

la respuesta puede actualizarse tan pronto como algo cambie .

Lado lejano
fuente
3
solo para aclarar, importar el css como sass funcionó así para mí: @import url ("ruta / a / archivo-sin-extensión-css");
Craig Wayne el
1
En realidad, esto no funciona en la versión basada en rubíes de sass. Por ejemplo, el comando: sass myFile.scss: output.css falla con una importación css, pero funciona cuando cambia la extensión del archivo .css a .scss. Ejecute con la última versión al momento de escribir este comentario: 3.4.22 / Selective Steve. Esto también afecta a los corredores de tareas que usan la versión ruby, como grunt-contrib-sass.
ansorensen
@ansorensen, creo que hay confusión de tu parte. ¿Qué quieres decir con "funciona cuando cambias la extensión del archivo .css a .scss" ? Toda la idea era exactamente sobre archivos CSS normales , y dos formas de trabajar con ellos (no confunda con importar SCSS). Lea una vez más la pregunta y la respuesta.
Farside
@Farside Sin confusión. La sintaxis de importación 'ruta / a / archivo' no funciona en la última versión de la gema sass en Ruby. Cuando ejecuto sass con una importación, la importación funciona correctamente cuando el archivo en la ruta importada tiene una extensión .scss y falla cuando el archivo tiene un .css. La pregunta solicita una importación de css a scss, y usted proporciona una respuesta para lib-sass & node-sass. Estoy comentando que esta funcionalidad no está en las versiones basadas en rubíes de sass.
ansorensen
1
@ansorensen, Dios mío, tantos mensajes de texto tuyos ... Fui explícito, y no confundas a nadie. Node-sasses una biblioteca de Node.js LibSass (la versión C de Sass). Ni una sola mención de eso libsasso node-sassestá basado en Ruby, ni una sola mención sobre la versión RUBY solo en la pregunta original. Por favor, lea atentamente antes de escribir 3 comentarios seguidos la próxima vez. Tengo todas las referencias: según el número 193 todavía no está implementado después de 5 años de discusión para la versión de Ruby, prometen esta funcionalidad solo cuando ver. 4.0 estará disponible.
Farside
37

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"
Rafal Pastuszak
fuente
3
Falla debido al uso del punto de partida en desuso. "Lo que es, pero nunca puede ser ..." Estoy seguro de que fue genial cuando salió por primera vez, pero necesita una actualización para funcionar nuevamente, o debe instalar complementos obsoletos. Gracias, C§
CSS
18

Si tiene un .cssarchivo que no desea modificar, ni cambie su extensión a .scss( por ejemplo, este archivo es de un proyecto bifurcado que no mantiene ), siempre puede crear un enlace simbólico y luego importarlo a su archivo.scss .

Crea un enlace simbólico:

ln -s path/to/css/file.css path/to/sass/files/_file.scss


Importa el archivo de enlace simbólico en un destino .scss:

@import "path/to/sass/files/file";


Su .cssarchivo de salida de destino contendrá contenido del .scssarchivo de enlace simbólico importado , no una regla de importación CSS ( mencionada por @yaz con el mayor número de votos ). Y no tiene archivos duplicados con diferentes extensiones, lo que significa que cualquier actualización realizada dentro del .cssarchivo inicial se importa inmediatamente a su salida de destino.

El enlace simbólico (también enlace simbólico o enlace suave) es un tipo especial de archivo que contiene una referencia a otro archivo en forma de ruta absoluta o relativa y que afecta la resolución del nombre de ruta.
- http://en.wikipedia.org/wiki/Symbolic_link

Nik Sumeiko
fuente
99
Agregar un enlace simbólico no es una solución muy portátil (es decir, múltiples desarrolladores o sistemas de compilación)
LocalPCGuy
@LocalPCGuy es, cuando ambos archivos ( .cssy el enlace simbólico creado) están disponibles para todos a través de un repositorio compartido, por ejemplo.
Nik Sumeiko
Acabo de hacer esto y iba a responder sobre enlaces sym en este hilo, ¡pero me alegro de que ya esté aquí! Es cierto que esta necesidad es rara, pero mi situación implicaba no querer modificar el archivo CSS (porque era un archivo Bower), por lo que construir un enlace simbólico e importarlo funcionó perfectamente.
Aaron Krauss
2
Para los usuarios de Windows , la misma funcionalidad tendría una sintaxis diferente mklink /H <link> <target>, y se llama hard link @mrsafraz.
Farside
5

Puede usar un tercero importerpara personalizar la @importsemántica.

node-sass-import-once , que funciona con node-sass (para Node.js) puede importar en línea archivos CSS.

Ejemplo de uso directo:

var sass = require('node-sass');,
    importOnce = require('node-sass-import-once');

sass.render({
  file: "input.scss",
  importer: importOnce,
  importOnce: {
    css: true,
  }
});

Ejemplo de configuración de grunt-sass :

var importOnce = require("node-sass-import-once");
grunt.loadNpmTasks("grunt-sass");

grunt.initConfig({
  sass: {
    options: {
      sourceMap: true,
      importer: importOnce
    },
    dev: {
      files: {
        "dist/style.css": "scss/**/*.scss"
      }
    }
  });

Tenga en cuenta que node-sass-import-once no puede importar parciales Sass actualmente sin un guión bajo explícito. Por ejemplo con el archivo partials/_partial.scss:

  • @import partials/_partial.scss tiene éxito
  • @import * partials/partial.scss falla

En general, tenga en cuenta que un importador personalizado podría cambiar cualquier semántica de importación. Lea los documentos antes de comenzar a usarlo.

joews
fuente
4

Si estoy en lo cierto, css es compatible con scss para que pueda cambiar la extensión de un css a scss y debería seguir funcionando. Una vez que cambie la extensión, puede importarla y se incluirá en el archivo.

Si no lo haces, sass usará css @import, que es algo que no quieres.

Pickels
fuente
16
desafortunadamente, a veces los archivos CSS importados están fuera de su control, como en una biblioteca que empaqueta algunos activos estáticos.
Eric Drechsel
2

Descubrí una forma elegante, similar a Rails, de hacerlo. Primero, cambie el nombre de su .scssarchivo a .scss.erb, luego use una sintaxis como esta (ejemplo para el recurso CSS CSS Jewellery_js-rails4 ):

@import "<%= asset_path("highlight_js/github") %>";

Por qué no puede alojar el archivo directamente a través de SCSS :

Hacer un @importSCSS funciona bien para archivos CSS siempre y cuando explícitamente uses la ruta completa de una forma u otra. En modo de desarrollo, rails ssirve activos sin compilarlos, por lo que un camino como este funciona ...

@import "highlight_js/github.css";

... porque la ruta alojada es literalmente /assets/highlight_js/github.css. Si hace clic con el botón derecho en la página y "ver fuente", luego hace clic en el enlace de la hoja de estilo con lo anterior @import, verá una línea allí que se parece a:

@import url(highlight_js/github.css);

El motor SCSS se traduce "highlight_js/github.css"en url(highlight_js/github.css). Esto funcionará a la perfección hasta que decida intentar ejecutarlo en producción donde los activos están precompilados e inyectar un hash en el nombre del archivo. El archivo SCSS seguirá resolviéndose en una estática /assets/highlight_js/github.cssque no fue precompilada y que no existe en producción.

Cómo funciona esta solución:

En primer lugar, al mover el .scssarchivo a .scss.erb, hemos convertido efectivamente el SCSS en una plantilla para Rails. Ahora, siempre que usemos <%= ... %>etiquetas de plantilla, el procesador de plantillas de Rails reemplazará estos fragmentos con la salida del código (como cualquier otra plantilla).

Establecer asset_path("highlight_js/github")en el .scss.erbarchivo hace dos cosas:

  1. Activa la rake assets:precompiletarea para precompilar el archivo CSS apropiado.
  2. Genera una URL que refleja adecuadamente el activo independientemente del entorno de Rails.

Esto también significa que el motor SCSS ni siquiera analiza el archivo CSS; ¡solo está alojando un enlace! Por lo tanto, no hay parches de mono hokey o soluciones brutas. Servimos un activo CSS a través de SCSS según lo previsto, y usamos una URL para dicho activo CSS como Rails pretendía. ¡Dulce!

Synthead
fuente
Para mí, la solución parece un poco sombría y suena más como un truco. ¡Pero es un buen trabajo de investigación!
Farside
0

Solución simple:

Todos o casi todos los archivos css también pueden interpretarse como si fueran scss. También permite importarlos dentro de un bloque. Cambie el nombre de css a scss e impórtelo así.

En mi configuración real hago lo siguiente:

Primero copio el archivo .css en uno temporal, esta vez con la extensión .scss. Configuración de ejemplo de Grunt:

copy: {
    dev: {
        files: [
            {
                src: "node_modules/some_module/some_precompiled.css",
                dest: "target/resources/some_module_styles.scss"
            }
        ]
    }
}

Luego puede importar el archivo .scss desde su scss principal (en mi ejemplo, incluso se importa en un bloque):

my-selector {
  @import "target/resources/some_module_styles.scss";
  ...other rules...
}

Nota: esto podría ser peligroso, ya que efectivamente dará como resultado que el CSS se analice varias veces. Verifique su css original para ver si contiene algún artefacto interpretable de scss (es improbable, pero si sucede, el resultado será difícil de depurar y peligroso).

peterh - Restablece a Monica
fuente
-3

Ahora es posible usar:

@import 'CSS:directory/filename.css';
Shlomi Schwartz
fuente
3
solo si la gema sass-css-importerestá instalada, se llama a sass con el interruptor -r sass-css-importery .cssse omite de la ruta del archivo
Bernhard Döbler
-4

Puedo confirmar que esto funciona:

class CSSImporter < Sass::Importers::Filesystem
  def extensions
    super.merge('css' => :scss)
  end
end

view_context = ActionView::Base.new
css = Sass::Engine.new(
  template,
  syntax:     :scss,
  cache:      false,
  load_paths: Rails.application.assets.paths,
  read_cache: false,
  filesystem_importer: CSSImporter # Relevant option,

  sprockets:  {
    context:     view_context,
    environment: Rails.application.assets
  }
).render

Crédito a Chriss Epstein: https://github.com/sass/sass/issues/193

Macario
fuente
1
¿Cómo puede usar esto en su archivo scss?
Adrian Ber
-10

Simple.

@import "ruta / a / archivo.css";

Adam Stacoviak
fuente
66
He intentado esto, pero no extraerá el contenido del archivo al comprimirlo, solo mantendrá la línea @import.
GSto
1
Respuesta con la puntuación más baja, pero irónicamente, esta parece ser la forma correcta, ahora. Incluir el sufijo es lo correcto.
Wyck el