Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:sistema-diseno-estructura-carpetas [2026/10/24 00:05] – Proyecto sin Angular: la compilación se enlaza al tema de SASS claude
+++ clase:daw:diw:sistema-diseno-estructura-carpetas [2026/10/24 00:14] (actual) – [CSS linters] Lorenzo
@@ Línea 21: / Línea 21: @@
     main.scss
 src/app/components/ui
-    /c-button
+    /c-boton
     /c-panel
 src/app/components/paginas
@@ Línea 110: / Línea 110: @@
 </sxh>
   * /04_components
-    * _cada_uno_de_los_componentes.scss: Habrá un fichero por cada Bloque que sea de tipo Componente pero que **NO sean de Angular**. Por ejemplo ''_c-button.scss'', ''_l-flex.scss'' , ''_l-columns.scss'' o ''_c-panel.scss''. Más información en [[clase:daw:diw:sistema-diseno-bem]], [[clase:daw:diw:sistema-diseno-tokens]], [[clase:daw:diw:sass]], [[clase:daw:diw:sistema-diseno-layout]]
+    * _cada_uno_de_los_componentes.scss: Habrá un fichero por cada Bloque que sea de tipo Componente pero que **NO sean de Angular**. Por ejemplo ''_c-boton.scss'', ''_l-flex.scss'' , ''_l-columns.scss'' o ''_c-panel.scss''. Más información en [[clase:daw:diw:sistema-diseno-bem]], [[clase:daw:diw:sistema-diseno-tokens]], [[clase:daw:diw:sass]], [[clase:daw:diw:sistema-diseno-layout]]
     * _index.scss: Los //imports// de cada fichero de esta carpeta.
 <sxh sass>
-@forward "./_c-button.scss";
+@forward "./_c-boton.scss";
 @forward "./_c-panel.scss";
 @forward "./_l-columns.scss";
@@ Línea 149: / Línea 149: @@
 <sxh gutter:false>
   src/app/components/ui
-     /c-button
+     /c-boton
-        c-button.ts
+        c-boton.ts
-        c-button.html
+        c-boton.html
-        c-button.scss
+        c-boton.scss
     /c-panel
@@ Línea 185: / Línea 185: @@
   * ''src/app/components/ui/l-flex'': Estamos creando componentes o atributos Angular para flex
-Lo normal es que esté uno o el otro. Lo mismo se podría aplicar a cualquier otro layout o componentes como ''c-button''.
+Lo normal es que esté uno o el otro. Lo mismo se podría aplicar a cualquier otro layout o componentes como ''c-boton''.
 </note>
@@ Línea 203: / Línea 203: @@
 │   ├─ 03_global
 │   ├─ 04_components
-│   │   ├─ _c-button.scss
+│   │   ├─ _c-boton.scss
 │   │   ├─ _c-panel.scss
 │   │   └─ _index.scss
@@ Línea 215: / Línea 215: @@
 </sxh>
-La carpeta ''scss'' se compila en ''css'' con ''npx sass --watch scss:css'' y cada página enlaza solo ''css/main.css'', como se explica en [[clase:daw:diw:sass#compilar_sass|SASS: Compilar SASS]].
+  * Instalar SASS en el proyecto:
-===== CSS linters =====
-Angular incluye de serie una herramienta de procesamiento CSS llamada [[https://postcss.org/|PostCSS]]. Esta herramienta lee el CSS y permite analizarlo o hacer modificaciones.
-PostCSS está basado en plugins que permiten extender PostCSS con nuevos análisis o modificaciones.A las herramientas que analizan el código para ver si tiene "problemas" se le llaman //linters//.
-Nosotros vamos a usar PostCSS para analizar nuestro CSS y ver si cumple las normas de BEM. El plugin o linter que vamos a usar es [[https://github.com/postcss/postcss-bem-linter|postcss-bem-linter]].
-Los pasos para instalarlo son
-  * Descargar el linter
 <sxh bash>
-npm install --save-dev postcss-bem-linter
+npm install --save-dev sass
 </sxh>
-  * Crear/modificar el fichero ''.postcssrc.json''. Debe estar en el raíz del proyecto.
+  * Compilar la carpeta ''scss'' en la carpeta ''css''. Con ''--watch'' se vuelve a compilar cada vez que guardas un ''.scss''. Solo sale ''css/main.css'' porque el resto de ficheros empiezan por ''_'' (ver [[clase:daw:diw:sass#ficheros_parciales|SASS: Ficheros parciales]]):
+<sxh bash>
-<sxh json; highlight: [4]>
+npx sass --watch scss:css
-{
-  "plugins": {
-    "postcss-bem-linter": {
-      "preset": "bem"
-    }
-  }
-}
 </sxh>
+  * Enlazar en cada página solo el CSS generado:
+<sxh html>
-<nodisp 2>
+<link rel="stylesheet" href="css/main.css">
-===== UIFactory =====
-<note tip>
-Para evitar el warning:
-  ▲ [WARNING] NG8113: Boton is not used within the template of App [plugin angular-compiler]
-Hay que añadir lo siguiente en el fichero ''tsconfig.json''
-<sxh json; highlight: [5]>
-{
-  "angularCompilerOptions": {
-    "extendedDiagnostics": {
-      "checks": {
-        "unusedStandaloneImports": "suppress"
-      }
-    }
-  }
-}
 </sxh>
-Más información:
-  * [[https://angular.dev/extended-diagnostics/NG8113#what-if-i-cant-avoid-this|NG8113: Unused Standalone Imports. What if I can't avoid this?]]
+<note important>
+El navegador no entiende SASS: enlazar ''scss/main.scss'' no aplica ningún estilo. Y ''css/main.css'' no se edita a mano, porque la siguiente compilación lo sobrescribe y se pierde lo que hayas cambiado.
 </note>
-</nodisp>