¿Importar archivos CSS normales en archivos SCSS?

¿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

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)

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.

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.

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 .

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"

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

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.

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.

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!

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).

Ahora es posible usar:

@import 'CSS:directory/filename.css';

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

Simple.

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