¿Cómo combinar archivos.CSS con Sass(u otra herramienta)?

google-closure google-closure-library

Question

Esta pregunta ya tiene una respuesta aquí:

• Importar archivo CSS regular en el archivo SCSS? 14 respuestas

Puedo usar Sass para compilar múltiples archivos de entrada .SCSS o .SASS en un solo archivo de salida .CSS usando @import como se describe here .

Si utilizo @import para incluir archivos .CSS normales, no se fusionan. El archivo de salida .CSS todavía contiene las directivas @import . Eso tiene sentido.

Pero, ¿hay alguna manera de anular este comportamiento, tal vez un cambio de línea de comandos al compilador Sass? En otras palabras, ¿puedo decirle a Sass que intente fusionar por la fuerza @import "foo.css"; ¿Como si fuera un archivo .SCSS?

Estoy usando una biblioteca de terceros ( Google Closure Library ) con muchos archivos .CSS. Solo estoy usando algunos de estos en mi proyecto. Prefiero evitar las soluciones manuales como cambiar el nombre de todos estos archivos como .SCSS (aunque esto parece funcionar) o copiar y pegar sus contenidos en mi archivo .SCSS (también funciona). Y no quiero servirlos a todos para que sean importados en el lado del cliente. Realmente me gustaría que Sass incluya los pocos archivos .CSS que uso "tal cual" y produzca una hoja de estilo de salida única. ¿Posible? ¿Hay alguna otra herramienta que debería mirar?

Answer 1

Esto se puede hacer en el lado del servidor y ahorrarle un poco de molestia si esa es una opción. Ya que simplemente está fusionando los archivos y ya que solo es CSS, no debería haber ningún conflicto en la información que pueda dañar su sitio. Además, de esta manera le da flexibilidad para realizar actualizaciones en el CSS a medida que se mejoran los marcos.

Ruby no es mi idioma de elección, pero sigue siendo muy viable para hacer todo lo necesario aquí. Hay una herramienta por ahí escrita en Ruby que lo hará por usted con CSS y con archivos JS. Eche un vistazo a esta publicación del blog para obtener el resumen: http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool

Espero que esto sea de utilidad y, por favor, avíseme si necesita algo más en este caso.

Answer 2

No he encontrado una manera de hacer esto en Sass.

Mi solución es importar bibliotecas de terceros directamente desde sus URL. Por supuesto, esto solo funciona para las bibliotecas CSS que se sirven a través de URL. Sigue importando varios archivos, pero al menos no tengo que cambiar el nombre de los archivos y administrar una copia modificada de la biblioteca CSS del proveedor.

Ejemplo:

// ORIGINAL: locally managed, modified copy (bad), no @import in output (good)
@import ''my_modified_copy/closure/goog/css/common.scss'';

// WORKAROUND: vendor-managed (good): @import in output (bad but acceptable)
@import ''http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css'';

Antes del lanzamiento, probablemente agregaré una secuencia de comandos para extraer una versión actual del proveedor y cambiar el nombre de todos los archivos .css a archivos .scss. Pero por ahora, la solución anterior es aceptable para el desarrollo.

Answer 3

todos los archivos CSS también son válidos para SCSS ... así que si cambia los archivos necesita importarlos "invisiblemente" o fusionarlos con _filename.scss entonces @import del archivo scss principal utilizando @import "filename"; (extensión opcional) debe compilarse en un gran CSS sin declaraciones de @import dentro

editado para agregar: lo siento, acabo de ver tu edición después de un fallo del navegador ... y ves que no es lo que estás buscando, no sé de otra manera