Closed chochocaliente closed 1 year ago
Buongiorno @chochocaliente hai una demo di esempio? non riesco a riprodurre il tuo errore.
Grazie per la risposta. Preparerò un altro test e ti incollerò tutto qui. Se possibile anche un video :) thanks
Grazie @chochocaliente
Ciao.
"bootstrap-italia": "^2.7.0"
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
non viene creata il file css che dovrei referenziare nel mio html.
ho anche provato con la comilazione Watch
di Sass e mi da errore:
16 │ @import 'bootstrap/scss/functions';
L'errore mi sembra abbastanza chiaro:
npm ERR! Missing script: "build"
Infatti nella sezione script
del tuo packege.json
non 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.
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.
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:
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.
Grazie mille.
Grazie @Virtute90 direi che possiamo chiudere la segnalazione @chochocaliente
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!!!