web-dev-qa-db-fra.com

Utilisez SASS (à partir de la ligne de commande) et Autoprefixer (pour Bootstrap 4.x)

J'ai récemment commencé à utiliser les fichiers scss , en particulier pour personnaliser Bootstrap .

Pour compiler mes fichiers scss (et aussi bootstrap) j'utilise sass depuis la ligne de commande.

Exemple :

sass /path/to/scss/bootstrap/mycustom.scss /path/to/css/bootstrap.min.css -t compressed -C --sourcemap=none

mycustom.scss est quelque chose comme ça:

 $theme-colors: (
     "custom-primary": "...",
     "custom-secondary": "..."
 );
 ....
 ....
 @import "bootstrap";

De cette façon, je peux personnaliser bootstrap à mon plaisir, sans problème.

Aujourd'hui, cependant, j'ai réalisé qu'un composant graphique (sélection personnalisée) n'était pas rendu correctement. Après quelques recherches, j'ai trouvé que cela était dû au manque de Autoprefixer pendant la compilation, et donc certaines propriétés css n'ont pas été ajoutées à mon bootstrap.min.css .

J'ai trouvé cela sur Bootstrap: https://getbootstrap.com/docs/4.2/getting-started/build-tools/#autoprefixer

Mais je ne peux pas trouver de solution pour compiler Bootstrap (avec sass ) en utilisant Autoprefixer.

twitter-bootstrapsassbootstrap-4autoprefixer
10
WhiteLine

C'est exactement le même problème auquel j'étais confronté. Je regarde donc beaucoup sur Internet et j'ai trouvé une solution possible à ce problème. Vous pouvez résoudre ce problème en utilisant NPM (Gestionnaire de packages de nœuds). Lire ce ou cet article

De quoi as-tu besoin,

Créez un fichier package.json ou exécutez npm init

Créez votre commande comme mentionné dans l'article

Ajoutez votre devDependencies dans votre cas node-sassautoprefixeronchange et postcss-cli

Courir npm install, (une fois tous les packages installés)

Courir npm start

Voici comment je fais Par exemple

package.json 

{
  "name": "web_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "autoprefixer": "^9.4.2",
    "node-sass": "latest",
    "onchange": "^5.2.0",
    "postcss-cli": "latest"
  },
  "scripts": {
    "build:sass": "node-sass --output-style=expanded --source-map=true assets/scss/style.scss assets/css/style.css",
    "prefix": "npm run build:sass && postcss assets/css/style.css --use=autoprefixer --output=assets/css/style.css",
    "start": "onchange \"assets/scss/**/*.scss\" -- npm run prefix"
  },
  "browserslist": [
    "last 2 versions"
  ],
  "repository": {
    "type": "git",
    "url": "Repo/Path"
  },
  "keywords": [
    "SASS"
  ],
  "author": "Ismail Farooq",
  "license": "ISC",
  "homepage": "Path",
  "dependencies": {}
}

Structure racine

enter image description here

Structure des dossiers Sass

enter image description here

5
Ismail Farooq

ne pouvez-vous pas conserver le bootstrap et votre css personnalisé différent. comme nous essayons traditionnellement d'écraser bootstrap avec notre css personnalisé en utilisant un autre style externe, de même si vous voulez apprendre sass essayez de créer votre nouvelle feuille de style externe avec sass, en laissant le code bootstrap intact) et ajoutez votre style personnalisé ci-dessous bootstrap importez en incluant uniquement main .scss qui inclut vos styles personnalisés

0
cyrus

Je suppose que vous utilisez npm pour convertir scss en css.

Juste besoin d'installer postcss qui est intégré au plugin autoprefixer. Ensuite, au lieu de sass en ligne de commande, vous devez utiliser postcss en ligne de commande pour convertir en css. veuillez vous référer à https://www.npmjs.com/package/postcss#npm-run--cli

0
Sudipto Roy