¿Importar un archivo CSS normal en un archivo SCSS?

559

¿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 usarlo sin cambiar el nombre de todos mis archivos a * .scss

2
  • 3
    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) 26/04/2017 a las 15:18
  • A partir de 2018, el uso de SASS@import en un archivo CSS normal debería generar un @import CSS normal . Eso significa una solicitud HTTP más y sin 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. 9/11/18 a las 13:47
261

Parece que esto no está 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 de *.cssla misma manera que para los *.scssarchivos, simplemente omita la extensión:

@import "path/to/file";

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

Consulte esta respuesta para obtener más detalles.

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

7
  • 25
    @kleinfreund no es cierto con Sass 3.3.1. La @importdeclaración no se cambia en absoluto y aparece en el archivo CSS resultante, Sass no incluye el archivo CSS referenciado como pregunta @GSto. Parece que se implementará en Sass 3.4 o 4.0 17 de mayo de 2014 a las 16:58
  • 1
    Si está usando Gulp o Grunt, simplemente use una herramienta diferente para importar sus archivos CSS, es más fácil y funciona ahora . Yo uso gulp-import-css , no estoy seguro de cuál es el equivalente de Grunt. 18 de mayo de 2014 a las 2:32
  • 3
    Funciona con libsassal menos. Vea la respuesta stackoverflow.com/questions/7111610/… y PR github.com/sass/libsass/pull/754
    IVN
    5/10/2016 a las 9:05
  • "La importación funciona de *.cssla misma manera que los *.cssarchivos" es una tautología. Querías que fuera uno de esos *.scss, ¿verdad? 4 de marzo de 2018 a las 15:16
  • 1
    A partir de la v3.5.3, libsass advierte que este es un comportamiento no estándar y no se debe confiar en él. (En su lugar, "Utilice un importador personalizado para mantener este comportamiento"). Github.com/sass/libsass/releases/tag/3.5.3
    jacobq
    18 de mayo de 2018 a las 21:56
405

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 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 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 nuevos paquetes de módulos "elegantes", como webpack , probablemente necesitará usar use ~al principio de la ruta. Entonces, si desea importar la siguiente ruta node_modules/bootstrap/src/core.scss, escribirí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 ). He probado el uso @importde node-sass y está funcionando bien. Desafortunadamente, esto funciona y no funciona en algunas instancias de ruby.

16
  • 1
    Esto parece estar implementado en, libsasspero cuando se usa la implementación ruby ​​de sass, parece que esta sintaxis funciona, pero solo si lo ha sass-css-importerrequerido. Al menos eso es lo que estoy viendo. ¿Alguien más puede confirmar esto?
    bsara
    28/07/2015 a las 1:37
  • 6
    ¿Estás seguro de que tienes la última versión de sass? He estado usando esta sintaxis durante un tiempo y funciona bien tanto con los intérpretes rubycomo con los nodejsintérpretes. ¿Ha comprobado 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
    29/07/2015 a las 12:54
  • 4
    Estoy usando ruby ​​sass v3.4.18 (con Jekyll) de acuerdo con mi Gemfile.lock. Todavía estoy viendo Error: File to import not found or unreadable: cssdep/cssfile. Si creo un cssdep/cssfile.scss, de repente funciona. Así que no es un problema de ruta, por alguna razón todavía no puedo incluir archivos '.css' de SASS :( 31/08/15 a las 15:06
  • 1
    ruby -v: ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32] sass -v: Sass 3.4.17 (Selective Steve)No trabaja aquí 1 de septiembre de 2015 a las 7:58
  • 5
    ¡Gracias por esto! Pude importar normalize.css usando node-sass con@import "node_modules/normalize.css/normalize";
    Nick
    7 de ene. De 2016 a las 18:38
274

Esto se implementó y fusionó a partir de la versión 3.2( extracción # 754 combinada el 2 de enero de 2015 para 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 la extensión `.css` ** al final (da como resultado una lectura real de` s [ac] ss | css` parcial y la incluye en línea con SCSS / SASS):

    @import "path/to/file";

  2. para importar el archivo CSS de forma tradicional

    la sintaxis va de la manera tradicional, ** con la extensión `.css` ** al final (resultados en` @import url ("ruta / a / archivo.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, escribo esto explícitamente: Sass basado en Ruby todavía tiene esta característica sin implementar 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 . Parece que habrá una implementación muy pronto, se asignó la nueva etiqueta "planificada" "Propuesta aceptada" para el número 556 y la nueva función.@use@use

UPD: el 26 de octubre de 2020 lib-sass quedó en desuso , por lo que el problema # 556 se cerró de inmediato .

__

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

8
  • 3
    solo para aclarar, la importación de css como sass funcionó así para mí: @import url ("ruta / a / archivo-sin-extensión-css"); 28/04/2016 a las 6:15
  • 1
    En realidad, esto no funciona en la versión basada en ruby ​​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 a la fecha de redacción de este comentario: 3.4.22 / Selective Steve. Esto también afecta a los corredores de tareas que utilizan la versión ruby, como grunt-contrib-sass. 21/06/2016 a las 23:14
  • @ansorensen, creo que hay confusión de tu lado. ¿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 los confunda con la importación de SCSS). Lea una vez más la pregunta y la respuesta.
    Farside
    21/06/2016 a las 23:44
  • @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 proporciona una respuesta para lib-sass y node-sass. Estoy comentando que esta funcionalidad no está en las versiones de sass basadas en ruby. 22/06/2016 a las 23:44
  • 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 de 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 , aún no se implementó después de 5 años de discusión para la versión Ruby, prometen esta funcionalidad solo cuando ver. 4.0 estará disponible.
    Farside
    28/06/2016 a las 14:47
261

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.

10
  • 1
    Quizás sea algo sobre convenciones y estándares. 6/11/12 a las 10:13
  • 73
    El guión bajo es para evitar que se compile como un archivo separado.
    Jonah
    25 feb 2013 a las 22:23
  • 4
    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. 15 de septiembre de 2013 a las 19:18
  • 47
    No puede cambiar la extensión de algún archivo CSS de un proveedor, por ejemplo. 9/04/2014 a las 18:58
  • 7
    Si está en su computadora / servidor, ¡puede hacerlo! Y también hay enlaces simbólicos si no lo desea.
    ste
    15 de septiembre de 2014 a las 22:04
38

Buenas noticias a 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"
1
  • 3
    Falla debido al uso de un punto de partida obsoleto. "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
    20/08/15 a las 21:10
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 a un destino .scss:

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


Su .cssarchivo de salida de destino contendrá el contenido del .scssarchivo de 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 .cssarchivo inicial se importa inmediatamente a la salida de destino.

Symbolic link (also symlink or soft link) is a special type of file that contains a reference to another file in the form of an absolute or relative path and that affects pathname resolution.
http://en.wikipedia.org/wiki/Symbolic_link

4
  • 10
    Agregar un enlace simbólico no es una solución muy portátil (es decir, múltiples desarrolladores o sistemas de compilación) 4 dic 14 a las 19:06
  • @LocalPCGuy lo es, cuando ambos archivos ( .cssy el enlace simbólico creado) están disponibles para todos a través de un repositorio compartido, por ejemplo. 5 de diciembre de 2014 a las 7:20
  • Acabo de hacer esto e iba a responder sobre los enlaces simbólicos 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 en absoluto (porque era un archivo bower), por lo que la construcción de un enlace simbólico y la importación funcionó perfectamente. 17/07/15 a las 15:41
  • 2
    Para los usuarios de Windows , la misma funcionalidad tendría una sintaxis diferente mklink /H <link> <target>y se llama enlace duro @mrsafraz.
    Farside
    22/03/2016 a las 22:49
5

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

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

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

  • @import partials/_partial.scss triunfa
  • @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.

4

Si estoy en lo correcto, css es compatible con scss, por lo que puede 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 hace, sass usará css @import, que es algo que no desea.

1
  • dieciséis
    desafortunadamente, a veces los archivos css importados están fuera de su control, como en una biblioteca que empaqueta algunos activos estáticos. 26/11/11 a las 0:09
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 activo CSS de la gema highlight_js-rails4 ):

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

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

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

@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 y tienen un hash inyectado en el nombre del archivo. El archivo SCSS aún se resolverá en una estática /assets/highlight_js/github.cssque no fue precompilada y 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).

Declarar 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 contiene un enlace! Así que no hay parches de monos tontos ni grandes soluciones. Estamos sirviendo un activo de CSS a través de SCSS según lo previsto, y usamos una URL para dicho activo de CSS como pretendía Rails. ¡Dulce!

1
  • Para mí, la solución parece un poco turbia y suena más como un truco. ¡Pero es un buen trabajo de investigación!
    Farside
    28/07/2016 a las 12:11
0

Solución alternativa sencilla:

Todo, o casi todo el archivo css también se puede interpretar como si fuera scss. También permite importarlos dentro de un bloque. Cambie el nombre del CSS a scss e impórtelo así.

En mi configuración actual 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 de 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, porque efectivamente resultará en que el CSS se analizará varias veces. Verifique que su css original contenga algún artefacto interpretable por scss (es improbable, pero si sucede, el resultado será difícil de depurar y peligroso).

0

Es 2021 y para todos aquellos que se confunden con las otras respuestas aquí como yo, les recomiendo encarecidamente que lean la documentación (enlaces a continuación). Adjunto una pequeña parte aquí:

To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @imports with the following characteristics to plain CSS imports:

  • Imports where the URL ends with .css.
  • Imports where the URL begins http:// or https://.
  • Imports where the URL is written as a url().
  • Imports that have media queries.
@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

Documentos:

-2

Ahora es posible usar:

@import 'CSS:directory/filename.css';
1
  • 3
    solo si gem sass-css-importerestá instalado, se llama a sass con el interruptor -r sass-css-importery .cssse omite de la ruta del archivo 13 de septiembre de 2014 a las 17:58
-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

1
  • 2
    ¿Cómo puedes usar esto en tu archivo scss? 7/04/2016 a las 19:37
-9

Sencillo.

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

2
  • 6
    He intentado esto, pero no extraerá el contenido del archivo en ese al comprimirlo, solo mantendrá la línea @import.
    GSto
    19/08/11 a las 15:01
  • 1
    La 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
    23/11/18 a las 3:25