italia / bootstrap-italia

Bootstrap Italia è un tema basato su Bootstrap 5 conforme alle "Linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione"
https://italia.github.io/bootstrap-italia
BSD 3-Clause "New" or "Revised" License
311 stars 163 forks source link

errore fase Build #962

Closed chochocaliente closed 1 year ago

chochocaliente commented 1 year ago

dopo aver lanciato npm i bootstrap-italia e npm install si creano: node_modules package.json package-lock.json

tuttabvia nel package.json questo appare vuoto:
{ "dependencies": { "bootstrap-italia": "^2.6.2" } }

quando lancio Build. Compare errore e mancano gli script

help!!!

astagi commented 1 year ago

Buongiorno @chochocaliente hai una demo di esempio? non riesco a riprodurre il tuo errore.

chochocaliente commented 1 year ago

Grazie per la risposta. Preparerò un altro test e ti incollerò tutto qui. Se possibile anche un video :) thanks

astagi commented 1 year ago

Grazie @chochocaliente

chochocaliente commented 1 year ago

Ciao.

Versione di Bootstrap Italia

"bootstrap-italia": "^2.7.0"

Comportamento atteso

1- inizio con installazione di npm eseguendo npm init -y 2- dopo aver installato Bootstrap italia come dipendenza: npm i bootstrap-italia --save si creano i node_modules con i package.json -> con i seguenti scripts:

{ "name": "test-1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "bootstrap-italia": "^2.7.0" } }

Dalla folder/cartella del mio progetto faccio: npm install e si installano i packges. tuttavia quando do: npm run build per compilare tramite sass, questo mi da errore:

vic@vics-MacBook-Pro test-1 % npm run build npm ERR! Missing script: "build" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run

npm ERR! A complete log of this run can be found in: npm ERR! /Users/vic/.npm/_logs/2023-09-26T14_42_57_138Z-debug-0.log vic@vics-MacBook-Pro test-1 %

LOG errore:

0 verbose cli /Users/vic/.nvm/versions/node/v16.20.2/bin/node /Users/vic/.nvm/versions/node/v16.20.2/bin/npm 1 info using npm@8.19.4 2 info using node@v16.20.2 3 timing npm:load:whichnode Completed in 0ms 4 timing config:load:defaults Completed in 1ms 5 timing config:load:file:/Users/vic/.nvm/versions/node/v16.20.2/lib/node_modules/npm/npmrc Completed in 2ms 6 timing config:load:builtin Completed in 2ms 7 timing config:load:cli Completed in 2ms 8 timing config:load:env Completed in 0ms 9 timing config:load:file:/Users/vic/Desktop/PROJECT BS/test-1/.npmrc Completed in 1ms 10 timing config:load:project Completed in 18ms 11 timing config:load:file:/Users/vic/.npmrc Completed in 0ms 12 timing config:load:user Completed in 0ms 13 timing config:load:file:/Users/vic/.nvm/versions/node/v16.20.2/etc/npmrc Completed in 0ms 14 timing config:load:global Completed in 0ms 15 timing config:load:validate Completed in 0ms 16 timing config:load:credentials Completed in 1ms 17 timing config:load:setEnvs Completed in 1ms 18 timing config:load Completed in 27ms 19 timing npm:load:configload Completed in 28ms 20 timing npm:load:mkdirpcache Completed in 4ms 21 timing npm:load:mkdirplogs Completed in 0ms 22 verbose title npm run build 23 verbose argv "run" "build" 24 timing npm:load:setTitle Completed in 26ms 25 timing config:load:flatten Completed in 4ms 26 timing npm:load:display Completed in 6ms 27 verbose logfile logs-max:10 dir:/Users/vic/.npm/_logs 28 verbose logfile /Users/vic/.npm/_logs/2023-09-26T14_42_57_138Z-debug-0.log 29 timing npm:load:logFile Completed in 7ms 30 timing npm:load:timers Completed in 0ms 31 timing npm:load:configScope Completed in 0ms 32 timing npm:load Completed in 71ms 33 silly logfile start cleaning logs, removing 1 files 34 silly logfile done cleaning log files 35 timing command:run Completed in 9ms 36 verbose stack Error: Missing script: "build" 36 verbose stack 36 verbose stack To see a list of scripts, run: 36 verbose stack npm run 36 verbose stack at RunScript.run (/Users/vic/.nvm/versions/node/v16.20.2/lib/node_modules/npm/lib/commands/run-script.js:98:13) 36 verbose stack at async module.exports (/Users/vic/.nvm/versions/node/v16.20.2/lib/node_modules/npm/lib/cli.js:78:5) 37 verbose cwd /Users/vic/Desktop/PROJECT BS/test-1 38 verbose Darwin 22.6.0 39 verbose node v16.20.2 40 verbose npm v8.19.4 41 error Missing script: "build" 41 error 41 error To see a list of scripts, run: 41 error npm run 42 verbose exit 1 43 timing npm Completed in 103ms 44 verbose code 1 45 error A complete log of this run can be found in: 45 error /Users/vic/.npm/_logs/2023-09-26T14_42_57_138Z-debug-0.log

Comportamento attuale

non viene creata il file css che dovrei referenziare nel mio html.

Possibili soluzioni

ho anche provato con la comilazione Watch di Sass e mi da errore:

16 │ @import 'bootstrap/scss/functions';

Virtute90 commented 1 year ago

L'errore mi sembra abbastanza chiaro:

npm ERR! Missing script: "build"

Infatti nella sezione script del tuo packege.jsonnon hai specificato cosa deve fare il comando build.

Se vuoi inserire il pacchetto nella tua pagina HTML devi seguire le istruzioni riportate nel sito.

In ogni caso non c'è nulla da compilare, quando installi il pacchetto è già pronto per l'uso.

chochocaliente commented 1 year ago

Grazie, ma il sito che tu stai linkando c'è il pacchetto che è gia compilato. Quello che voglio è personalizzare quel pacchetto (es. i colori - $primary, $secondary-h, $secondary-s, $secondary-b) -> Per fare questo, ho bisogno installare i node_modules e anche il package.json con 'npm install' ma questo me lo scarica sempre vuoto.

Virtute90 commented 1 year ago

Grazie, ma il sito che tu stai linkando c'è il pacchetto che è gia compilato. Quello che voglio è personalizzare quel pacchetto (es. i colori - $primary, $secondary-h, $secondary-s, $secondary-b) -> Per fare questo, ho bisogno installare i node_modules e anche il package.json con 'npm install' ma questo me lo scarica sempre vuoto.

  • consdera che ho giocato anche con Bootstrap playgroud e il colore $primary(h,s,b) cambia ma il $secondary o $danger-h, $danger-s, $danger-b non vengono mai modificati.

Ho fatto una prova al volo in un ambiente di test con vitejs configurato con react, ecco il risultato:

image

Ho seguito la guida riportata qui

Questa la mia configurazione: package.json

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "bootstrap-italia": "^2.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "sass": "^1.68.0",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

custom.scss

// file: bootstrap-italia-custom.scss

// modifica completa del template: è possibile ricompilare la libreria modificando alcune variabili SCSS

// Per l'override del colore $primary della palette in formato HSB (colore #FF3333 https://rgb.to/ff3333):
$primary-h: 0;
$primary-s: 80;
$primary-b: 100;

// Per l'override della famiglia di caratteri
$font-family-serif: "Custom Font", Georgia, serif;
$font-family-sans-serif: "Custom Font", Arial, Helvetica, sans-serif;
$font-family-monospace: "Custom Font", "Courier New", Courier, monospace;

// import libreria
@import "../node_modules/bootstrap-italia/src/scss/bootstrap-italia.scss";

Per quanto riguarda le variabili a cui fai riferimento, non esistono; ti consiglio di controllare questo file per tutte le variabili disponibili:

https://github.com/italia/bootstrap-italia/blob/main/src/scss/utilities/colors_vars.scss

Spero di esserti d'aiuto.

chochocaliente commented 1 year ago

Grazie mille.

astagi commented 1 year ago

Grazie @Virtute90 direi che possiamo chiudere la segnalazione @chochocaliente