Cómo compilar las scss fuera del IDE

[Iñaki Bergara，修改在7 年前。]

Buenas,

Tengo que trabajar con un freelance que no sabe (ni quiere aprender) mucho de Liferay. Su trabajo es implementar un diseño en HTML + CSS, pero si lo hace completamente independiente los estilos de Liferay sobreescriben los suyos y viceversa. Me gustaría poder darle los archivos .scss del tema de apariencia y dejarle que los incluya en sus pruebas locales, para que modifique o elimine lo que considere necesario.

El problema es que, cuando construyo el tema y me el IDE me crea los archivos por defecto (basado en "styled"), imports.scss quiere importar un par de archivos que no existen en mi proyecto. Cuando compilo el tema desde el IDE y creo el archivo war , no hay problema, pero si copio la carpeta css y trato de copilar las scss por sí solas falla porque no encuentra ésos archivos. El más importante de los cuales es mixins.scss.

Podría alguien por favor decirme de dónde sale ése archivo? Se genera automáticamente, me imagino, pero basado en qué? Puedo conseguir ése archivo, o los valores que debería tener, desde algún otro sitio para poder hacer la compilación externa?

Estoy usando liferay 7.

[Marcos Castro，修改在7 年前。]

Buenas Iñáki,

Todos los css que componen styled los tienes aquí:
https://github.com/liferay/liferay-portal/tree/aed94385c081b87eb8ce89bdc8425b61f4a98888/modules/apps/foundation/frontend-theme/frontend-theme-styled/src/main/resources/META-INF/resources/_styled/css

O en tu directorio 'build' de tu theme creado con el nuevo SDK: https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/themes-generator

Mi recomendación es que sobre-escribáis sólo lo esencial, y que para el resto de estilos que necesitéis hagáis extensiones de los estilos de bootstrap, de esta forma no ‘rompéis’ nada de la interfaz. Por ejemplo:
Si necesitas un botón muy muy grande, en vez de modificar el estilo del botón por defecto: “.btn”, creáis un estilo “.btn-xl”. Y lo usáis sólo ahí donde necesitáis.

Cuando tengáis que realizar modificaciones sobre los estilos de bootstrap o lexicon-base/atlas, lo más recomendable es que lo hagáis mediante el uso de variables, preferiblemente creando una capa nueva de variables que luego en el theme Liferay podéis pegar en el archivo “aui_variables.scss”.
Un ejemplo, imaginad que queréis modificar la paleta de colores principal, pues sólo tendríais que modificar las variables:

$brand-primary:
$brand-success:
$brand-info:
$brand-warning:
$brand-danger:

En vez de sobre-escribir más de 400 líneas de código.

[Iñaki Bergara，修改在7 年前。]

Gracias por la respuesta.

Había mirado la dirección que comentas, y he sacado gran cosa de ahí, pero en el archivo _imports.scss importa "mixins" y éso es lo que que no encuentro. Bueno, "bourbon" tampoco, pero lo que no me deja compilar es mixins. De momento, lo que he hecho es quitar los archivos que requieren mixins (por ejemplo, "portlet/topper") y tratar de funcionar sin éso.

Respecto a tu recomendación, intentamos algo así en la versión anterior, pero degeneró en un infierno de sobreescrituras y casos particulares que nadie sabía qué afectaba a qué. En ésta nueva versión, quiero intentar integrar las cosas un poco mejor, aunque dependo de lo que el freelancer se sienta cómodo haciendo.

[Marcos Castro，修改在7 年前。]

Si usas el último SDK no tendrás ningún problema con archivos o librerías CSS que falten.

Respecto a que el freelance se sienta cómodo trabajando en este modelo que propongo.
En realidad extender clases es la forma de trabajo más habitual en Bootstrap y está en sus guías. Y respecto al uso de variables para realizar modificaciones es algo que recomendamos y que ahorra mucho trabajo. Bootstrap ofrece la posibilidad de modificarlas incluso en su web:
http://getbootstrap.com/customize/

[Iñaki Bergara，修改在7 年前。]

Marcos Castro:

Si usas el último SDK no tendrás ningún problema con archivos o librerías CSS que falten.

Respecto a que el freelance se sienta cómodo trabajando en este modelo que propongo.
En realidad extender clases es la forma de trabajo más habitual en Bootstrap y está en sus guías. Y respecto al uso de variables para realizar modificaciones es algo que recomendamos y que ahorra mucho trabajo. Bootstrap ofrece la posibilidad de modificarlas incluso en su web:
http://getbootstrap.com/customize/

Al final, parece que éso es lo que ha hecho de todos modos. Si me dices que es la manera habitual de trabajar me dejas más tranquilo, porque hasta ahora lo que un freelance hacía el siguiente básicamente lo deshacía y era un auténtico laberinto de extensiones y sobreescrituras y demás. De momento parece que la cosa va bien, ya veremos cómo acabamos pero, independientemente de todo éso, gracias por tu ayuda.