Less.js: Compatibilidad con el englobamiento de archivos para @imports

Genial ... aunque solo nodo (no navegador) y no creo que ayude a otros
cuestiones. Podría ser útil, supongo... normalmente tendrías una cadena de dependencia
así que no querrías todo en orden alfabético.

Sí, no hay forma de que el navegador sepa qué archivos solicitar, por lo que parece un fracaso.

bueno, no lo descartaría solo porque solo se aplicaría al nodo, pero tampoco lo veo como una solicitud de función particularmente importante.

@agatronic con respecto a la cadena de dependencia, ayer estaba hablando con alguien sobre lo mismo en la reunión del nodo. Creo que esto es algo que es útil para bibliotecas de componentes/módulos, mixins, etc. como en el ejemplo. Y sí, el nodo solo era lo que estaba pensando.

Acabo de leer que el lápiz le permite especificar un directorio y, si lo hace, busca un index.sty ; me gusta eso.

en cuanto a importar cada archivo en un directorio, solo es realmente útil si los archivos solo contienen mixins (sin contenido)... porque el orden importa. ¿No estás seguro de que ese sea un escenario de la vida real en este momento?

Me gusta la idea del índice. Esa es una buena manera de hacerlo.

solo es realmente útil si los archivos solo contienen mixins (sin contenido).

Usamos mucho desarrollo basado en componentes. La mayoría de nuestros componentes Less no dependen de otros archivos. Por supuesto, el orden sí importa en CSS y con patrones de diseño más tradicionales, así que creo que tienes razón. La mayoría de la gente probablemente no usaría esto como yo lo haría, lo que significa que probablemente no lo usarían todo. Pero la idea del índice del lápiz óptico es una solución interesante para esto.

Esta no es una prioridad, pero acabo de ver esto y quería agregarlo como referencia: https://github.com/chriseppstein/sass-globbing

Soy un gran fanático de Sass y uso el complemento de importación global de Chris Eppstein todo el tiempo (los compañeros de equipo que estaban en máquinas con Windows no podían usarlo, así que tenlo en cuenta).

He estado buscando un equivalente en LESS, ¿alguien vio algo así?

Sí, soy un fanático de este complemento seguro. Creo que cualquiera que haya usado globbing sabe lo agradable que es trabajar con él, pero es una de esas cosas que parece "agradable tener" hasta que realmente lo usas. No puedo imaginarme tratando de hacer construcciones sin él ahora. Puede usar ensamblar menos , admite globbing (soy uno de los mantenedores de esto ...)

Por cierto, @josephspens , creé este proyecto ayer para convertir SASS a LESS. Como prueba de concepto, convertí los archivos .scss de bootstrap-sass y base a LESS, ambos ejemplos están en la carpeta ./test/ . De hecho, me sorprendió lo cerca que estuve de convertir todos los archivos Bootstrap .scss a LESS. Intente hacer una diferencia entre los archivos sass convertidos y los archivos sin arranque "nativos" (v2.3.1): no es una función completa, pero ahorra mucho tiempo.

Si termina teniendo que usar LESS en un proyecto, podría valer la pena echarle un vistazo. Para algunas funciones de idioma, no debería ser difícil revertir el proceso para convertir LESS a SASS

@lukeapage , mencionó aquí https://github.com/cloudhead/less.js/issues/1181#issuecomment -13546979 que esto solo sería útil para mezclar bibliotecas, y eso era cierto en ese momento.

Sin embargo, ahora que tenemos <strong i="8">@import</strong> (reference) , esta función será útil para cada hoja de estilo a la que se pueda hacer referencia.

Además, pensé en el concepto index.less y creé una solicitud para ello: https://github.com/cloudhead/less.js/issues/1339. Pero no creo que estas características sean mutuamente exclusivas o incluso necesariamente relacionadas. Globbing permite tanto patrones de inclusión como de exclusión, por lo que tiene mucho control de los patrones de globbing en la declaración de importación en sí.

Creo que la característica index.less resolvería un desafío completamente diferente, que es más como definir dependencias, realmente útil para módulos, componentes, temas, etc.

@jonschlinkert Estoy de acuerdo

@lukeapage , ¿puede darme una ventaja sobre qué lugares del código deben modificarse (más allá de tree/import/.js?) o sugerencias sobre lo que debo considerar, por ejemplo, si esto es específico para el nodo, etc. ? Podría intentarlo.

Esto sería una gran característica. Actualmente tengo una gran lista larga de hojas de estilo en mi archivo bundle.less :

<strong i="7">@import</strong> 'pages/home';
<strong i="8">@import</strong> 'pages/login';
<strong i="9">@import</strong> 'pages/404';
//etc

Sería útil condensar esto en:

<strong i="13">@import</strong> 'pages/*';

o similar.

Stylus le permite hacer esto -- <strong i="5">@import</strong> 'partials/*.styl -- y lo estaba usando _todo_ el tiempo. Estaría muy interesado en tener esto en Less también, para aliviarme de la tediosa tarea de contabilizar manualmente las importaciones.

Esta + importación explícita + no duplicados sería muy útil:

// Import specific file
<strong i="6">@import</strong> "extras/specific.less"
// Import all others, specific file is skipped in this glob
<strong i="7">@import</strong> "extras/*.less"

@lukeapage Me gustaría hacer un complemento para esto, ¿puede darme algunos consejos sobre por dónde empezar? gracias

Lo siento, Jon, me perdí tu primera solicitud de ayuda, no fue intencional.
Creo que sería mejor ponerlo en el núcleo (porque un complemento querría
anular el acceso al archivo de nodo estándar, y podría heredar e implementar
pero eso evita que otro complemento se construya sobre él, a menos que sean
muy cuidadoso), de todos modos, al menos agregaría soporte al núcleo para importar
múltiples archivos de una importación. Es posible hoy, el nuevo complemento de Bower
lo hace, pero es un poco hacky. Estaremos en contacto.

Ja, no me di cuenta de que ya había comentado, así que somos dos lol. No te preocupes en absoluto, sé cómo es.

podría ser mejor ponerlo en el núcleo

Suena bien. Yo también estaría feliz de ayudar con eso. No te preocupes de ninguna manera.

Ok, he estado pensando y así es como lo haría.

1. Agregue un expandToFilelist al administrador de archivos abstracto. Por defecto debería
   devuelve una matriz que contiene el nombre de archivo que se le da. No estoy seguro si debería
   ser sincrónico o asincrónico, probablemente no importa, ¿hacerlo asíncrono?
2. En el administrador de importación, llame a esa función una vez que tenga un administrador de archivos. Luego
   recorra todos los archivos y haga en cada uno lo que estaba haciendo en 1.
3. Haría que el administrador de importación esperara hasta que tuviera los resultados de todos los archivos
   antes de volver a llamar a la devolución de llamada (que está en visitante de importación) de esa manera
   podemos mantener un orden consistente. La devolución de la llamada tomaría ahora un
   matriz que contiene todos los argumentos (por ejemplo, el nombre de archivo completo debe recibirse una vez
   por archivo).
4. Puede haber complicaciones en la importación de visitantes en torno al contexto, no
   Por supuesto
5. Una importación ahora tomará una matriz de raíces (o tal vez una matriz de raíces
   y nombres de archivo). Necesitará evaluar todas las raíces en su función eval y
   devolver una raíz combinada... o tal vez crear un nuevo conjunto de reglas utilizando una matriz de
   las raíces evald, si eso funciona
6. Compilar y probar: todo debería funcionar
7. Cambie el administrador de archivos del nodo para implementar expandToFilelist si el nombre del archivo
   contiene *
8. Agregue pruebas y agregue pruebas a las exclusiones en la sección Jasmine del
   gruntfile, ya que no podemos implementar para el navegador
   ¡Voila!

Solo quería comentar, como solución alternativa, podría usar gulp con gulp-concat si está usando gulp como su herramienta de compilación.

gulp.src([
    'src/styles/main.less'
    ,'src/controls/**/*.less`
])
.pipe(concat('bundle.less')
.pipe(less())
...

Esta es efectivamente mi estructura de directorios... (aunque mi estructura es un poco diferente). Esperaba que esta fuera una función integrada, ya que incluso si solo el nodo sería muy útil.

Solo pensé en hacer +1 aquí... es un patrón bastante común. También hay varias soluciones sencillas para evitar el problema del pedido.

+1

No lo dije, pero agradecería la opción (incluso si solo del lado del servidor) ...

oh, la ironía aquí (la biblioteca principal se convirtió en js porque la misma biblioteca podría usarse servidor y cliente, solo para agregar una función solo de servidor).

El motor de análisis puede conservar la paridad. Esa sigue siendo una gran ventaja que no tiene nada que ver con lo que estamos discutiendo.

+1

Como si no hubiera suficientes ya: +1

+1 en serio

+1

:+1:

+1

+1

+1

+1

:+1: por favor!

+1 Jesús estaría feliz con el apoyo de comodines.

Hola amigos, los comentarios son excelentes, pero +1 no harán que esta función funcione más rápido. Está marcado como listo para implementarse y, cuando alguien lo implemente, se implementará.

+1 Jesús estaría feliz con el apoyo de comodines.

Creo que es seguro decir que si Jesús tuviera que elegir un preprocesador, sería Less.

Como ya no puedo esperar a que se resuelva este problema, escribo un complemento que lo hace y lo uso para mis proyectos. https://github.com/just-boris/less-plugin-glob
Less permite crear cargadores de archivos personalizados por @imports . Creé este que resuelve las importaciones con globos en la ruta de importación. Cualquier comentario será apreciado.

@just-boris Hola, me preguntaba cómo podría instalar esto de otra manera que no sea NPM,

Recibo los siguientes errores cuando uso NPM:

npm ¡ERROR! 404 'less-glob-plugin' no está en el registro npm.
npm ¡ERROR! 404 Deberías molestar al autor para publicarlo
npm ¡ERROR! 404
npm ¡ERROR! 404 Tenga en cuenta que también puede instalar desde un
npm ¡ERROR! 404 tarball, carpeta o url http, o url git.

Gracias de antemano, esto me ahorraría muchos dolores de cabeza.

@tonyflp , lo siento, hubo un error tipográfico, debe instalar less-plugin-glob .
Less solo acepta complementos nombrados en notación less-plugin-*

@just-boris Eso funcionó muy bien, gracias por esto.

¿No hay actualizaciones para esta característica?

just-boris i use grunt-contrib-less tienen un ejemplo de cómo cargar complementos como este:

complementos: [
new (require('less-plugin-autoprefix'))({navegadores: ["últimas 2 versiones"]}),
nuevo (require('less-plugin-clean-css'))(cleanCssOptions)
],

¿Cómo cargaría su complemento maravilloso aquí para que funcione con grunt-contrib-less?

Grande :+1: por la característica

@vospascal respondió en mi repositorio

;) gracias @just-boris lo vi :-) :+1:

Sigo esperando esta función :+1: . Gracias, @just-boris.

@just-boris gracias! Quiero decir gracias :-)

Esta sería una característica muy útil para mí, ya que prefiero agrupar todos mis componentes en un solo lugar, en lugar de tener todos los archivos de Less en una sola ubicación. Esto lleva a que existan menos archivos por todas partes, lo que sería una pesadilla para mantener una lista manual de importaciones.

Para cualquiera que use Gulp para crear sus archivos Less, he tenido éxito usando el complemento gulp-inject para crear automáticamente las declaraciones @import en mi archivo Less principal. Hice un breve artículo aquí: http://www.michaelbromley.co.uk/blog/425/automatic-import-of-lesssass-files-with-gulp

Para englobar menos, puede simplemente ejecutar esto en su proyecto,

npm install less-plugin-glob --save-dev

luego agregue esto a su Gruntfile en el grupo de opciones de su tarea menos

plugins: [require('less-plugin-glob')]

El resultado es algo como esto:

···
options: {
    compress: true,
    yuicompress: true,
    optimization: 2,
    cleancss: true,
    sourceMap: false,
    sourceMapFilename: 'css/maps/style.css.map',
    plugins: [require('less-plugin-glob')]
},
···

Ahora en tu archivo .less puedes escribir esto:

···
<strong i="15">@import</strong> "commons/**/*";
<strong i="16">@import</strong> "basic/**/*";
···

Vine aquí preguntándome si las importaciones globales eran compatibles, pero como estoy usando un par de scripts de shell de una sola línea en lugar de grunt/gulp para mi proceso de compilación. Terminé usando find & cat y mi fuente se mantiene más limpia que cualquiera de las alternativas. Menos sigue siendo genial.

# src/index.less + src/foo/bar.less + ... = dist/index.css
find -X src -type f -name '*.less' | xargs cat | lessc - | cleancss --s0 >dist/index.css

+1

Realmente sorprendido de que esto no haya sucedido hasta ahora. Gulp tiene soporte para esta función al menos.

@davidcalhoun Lea la primera publicación de este hilo.

Lo mismo, que yo sepa, la mayoría de las personas están compilando sus archivos LESS en CSS, no conozco muchos sitios en los que el navegador interprete LESS directamente. Para aquellos que deseen depurar, pueden usar mapas de origen

@just-boris No puedo hacer que funcione su complemento ... Supongo que estoy haciendo algo mal.

¿Alguien más lo ha hecho funcionar?

No obtengo ningún error ... simplemente no hay salida cuando intento usar globbing.

gulp.task( 'styles', () => {
  return gulp.src( [ 'app/styles/main.less' ] )
    .pipe( $.less( {
      plugins: [ require( 'less-plugin-glob' ) ],
    } ) )
    .pipe( gulp.dest( 'dist/styles' ) );
} );

// main.less
// Each line below is tried on it's own of course.
<strong i="10">@import</strong> "app/module/waffle.less"; // Works
<strong i="11">@import</strong> "app/module/**"; // Does not work.
<strong i="12">@import</strong> "app/module/**/*"; // Does not work.
<strong i="13">@import</strong> "app/module/**/*.less"; // Does not work.

@SpencerCarstens Es mejor plantear el problema en el propio repositorio del complemento.

@siete-fases-max :+1:

Tenía la esperanza de llegar a una mayor audiencia, pero tienes razón.

@seven-phases-max ¿No puedes integrar el glob-plugin dentro de menos?

Se integra bien, pero no parece hacer nada.

Si comento el complemento, mis errores son menos correctos en la importación.
globo

Cuando lo vuelvo a poner, el error se detiene.

Entonces, supongo que está haciendo algo.

El miércoles 5 de agosto de 2015, Mattia Astorino [email protected]
escribió:

@SpencerCarstens https://github.com/SpencerCarstens No puedes integrar
el glob-plugin dentro de menos?

—
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/less/less.js/issues/1181#issuecomment-128262749 .

Cordialmente,

spencer carstens

@equinusocio

¿No puedes integrar el glob-plugin dentro de menos?

Si quiere decir "por qué no poner esto en el núcleo"... Entonces, bueno, el enfoque Less actual (menos o más establecido en varias discusiones en varios hilos aquí) es más o menos: "nunca ponga una característica en el núcleo, _antes_ de que sea absoluta y totalmente evidente que la característica pertenece allí y no hay otras formas". Es decir, si algo se puede implementar como un complemento, _debería_ implementarse como un complemento (es por eso que, por ejemplo, incluso la instalación clean-css de larga vida en el núcleo se movió del núcleo al complemento correspondiente) .

@seven-phases-max ok, gracias. Me gusta esto.

Cerrando como se implementó en el complemento de @just-boris .

+1

+1

Hablar de resucitar viejos hilos

¿Qué se supone que indican estos +1? ¿El complemento no funciona?

El +1 indica que lo quieres o lo apoyas también

¿Apoyar qué? Eso es lo que estoy diciendo. Esto se ha solucionado y el problema está cerrado. Así que estoy preguntando qué se está haciendo +1.

He estado recibiendo estos correos electrónicos durante más de 2 años, ¿cuál es el problema aquí?