inside - sass-- watch

Importar archivo CSS regular en el archivo SCSS?

Question

¿Hay alguna forma de importar un archivo CSS normal con el comando @import de Sass? Si bien no uso toda la sintaxis de SCSS de sass, sigo disfrutando de la combinación / compresión de las funciones, y me gustaría poder usarla sin cambiar el nombre de todos mis archivos a * .scss

Answer 1

Ahora es posible usando:

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

Answer 2

Buenas noticias para todos, Chris Eppstein creó un complemento de brújula con funcionalidad de importación 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"

Answer 3

Debe incluir un guión bajo en el archivo css para ser incluido, y cambiar su extensión a scss (ej: _yourfile.scss ). Entonces solo hay que llamarlo así:

@import "yourfile";

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

Answer 4

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 archivos css directamente a su archivo sass. El siguiente github.com/sass/libsass/pull/754 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 *.css al final, se traducirá a la regla css @import url(...) .

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

NOTA:
Parece que esto no está funcionando para todos. Si su intérprete está basado en libsass , debería estar funcionando bien (verifique this ). He probado usando @import en node-sass y está funcionando bien. Desafortunadamente esto funciona y no funciona en algunos casos ruby.

Answer 5

En sass 3.5.5 esto está funcionando

@import url (''yourStyle.css'')

Answer 6

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

Para abreviar la larga historia, la sintaxis en el siguiente:

1. para importar (incluir) el archivo CSS en bruto

   la sintaxis no tiene la extensión .css al final (da como resultado la lectura real de s[ac]ss|css parcial e incluirla en línea a SCSS / SASS):

   @import "path/to/file";

2. Importar el archivo CSS de forma tradicional.

   la sintaxis es tradicional, con la extensión .css 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: Ruby basado en Sass 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 @use . Parece que habrá una implementación muy pronto, la nueva etiqueta "Planeada" "Propuesta aceptada" fue asignada para el problema # 556 y la nueva función @use .

La respuesta podría ser actualizada, tan pronto como algo cambie .

Answer 7

Me di cuenta de una manera elegante, como Rails para hacerlo. Primero, cambie el nombre de su archivo .scss a .scss.erb , luego use una sintaxis como esta (ejemplo para el activo CSS de highlight_js-rails4 gem ):

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

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

Hacer una @import en SCSS funciona bien para los archivos CSS siempre que se use explícitamente la ruta completa de una forma u otra. En el modo de desarrollo, rails s sirve 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 "ve el código fuente", luego haga clic en el enlace de la hoja de estilo con la @import anterior, verá una línea allí que se ve así:

@import url(highlight_js/github.css);

El motor SCSS traduce "highlight_js/github.css" a url(highlight_js/github.css) . Esto funcionará correctamente hasta que decida intentar ejecutarlo en producción, donde los activos se precompilan, se le inyecta un hash en el nombre del archivo. El archivo SCSS aún se resolverá en un /assets/highlight_js/github.css estático que no fue precompilado y no existe en producción.

Cómo funciona esta solución:

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

La indicación de asset_path("highlight_js/github") en el archivo .scss.erb hace dos cosas:

1. Activa los rake assets:precompile tarea de precompilación 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 está analizando el archivo CSS; ¡Sólo está alojando un enlace! Así que no hay parches de mono hokey o soluciones burdas. Estamos sirviendo un activo CSS a través de SCSS según lo previsto, y estamos utilizando una URL para dicho activo CSS como pretendía Rails. ¡Dulce!

Answer 8

Puede utilizar un importer @import para personalizar la semántica de @import .

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 grunt-sass config:

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 actualmente no puede importar parciales de Sass sin un subrayado inicial explícito. Por ejemplo con el archivo partials/_partial.scss :

• @import partials/_partial.scss correctamente
• @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 empezar a usarlo.

Answer 9

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 para Chriss Epstein: https://github.com/sass/sass/issues/193

Answer 10

Sencillo.

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

Answer 11

Si estoy en lo correcto, css es compatible con scss, así que puedes cambiar la extensión de 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á el css @import, que es algo que no quieres.

Answer 12

Si tiene un archivo .css que no desea modificar, ni cambia 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 tu .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 a un destino .scss :

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

Su archivo .css salida de destino mantendrá el contenido del archivo .scss enlace simbólico importado, no una regla de importación de CSS ( mencionada por @yaz con los votos de comentarios más altos ). Y no tiene archivos duplicados con diferentes extensiones, lo que significa que cualquier actualización realizada dentro del archivo .css inicial se importará inmediatamente a su salida de destino.

El enlace simbólico (también enlace simbólico o enlace flexible) 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

Answer 13

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. Renombra el css a scss, e importalo asi.

En mi configuración actual hago lo siguiente:

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

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 resultará que el css se analizará varias veces. Compruebe su css original para ver si contiene algún artefacto interpretable por scss (es improbable, pero si sucede, el resultado será difícil de depurar y peligroso).

Answer 14

Parece que esto no se ha implementado, en el momento de escribir este artículo:

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

Para libsass (implementación de C / C ++), la importación funciona para *.css la misma manera que para los archivos *.css ; simplemente omita la extensión:

@import "path/to/file";

Esto importará la path/to/file.css .

Ver esta respuesta para más detalles.

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