Étiquette : @import

[Webpack Encore] Résoudre les problèmes d’imports et de sous-imports de composants JS à l’utilisation de frameworks comme UiKit ou Foundation 6

10/03/2021 /

Note: vous pouvez vous référer à l’article: [Webpack Encore] Utiliser la méthode addAliases pour résoudre les problèmes de sous-imports de fichiers sass/scss à l’utilisation de frameworks comme UiKit ou Foundation 6 pour résoudre la même question côté CSS.

Sources:

Erreur: « ./node_modules/uikit/src/js/api/boot.js » contains a reference to the file « uikit-util ».

Utiliser la méthode addAliases() de Webpack Encore pour créer un alias vers le chemin de référence du fichier non trouvé dans node_modules. Dans le fichier webpack.config.js:

Etendre la configuration de Webpack Encore pour faciliter la surchage et l’écrasement de fichiers JS

Dans le fichier webpack.config.js:

Ici, Webpack va d’abord chercher le fichier JS dans le dossier assets. Si il ne le trouve pas, il va se rabattre sur le dossier node_modules.

Ajouter un console.log(config); vous permettra de visualiser la config au format JSON dans votre console.

Importer uniquement une sélection de modules issus d’un framework (et pas tout le framework)

Dans le fichier JS qui sert de point d’entrée à Webpack (dans mon exemple assets/app.js):

Dans le fichier JS qui sert à importer uniquement les modules voulus (dans mon exemple assets/uikit.js):

Ici, j’importe uniquement les modules notification, tooltip et uikit-icons. Le fichier généré par webpack pour le front ne contiendra pas le code des autres modules du framework UIkit.

[Webpack Encore] Utiliser la méthode addAliases pour résoudre les problèmes de sous-imports de fichiers sass/scss à l’utilisation de frameworks comme UiKit ou Foundation 6

09/03/2021 /

Source: Webpack sass loader resolve absolute path

/webpack.config.js:

/assets/styles/apps.scss.

ATTENTION: afin que le principe de fallback décrit dans l’exemple (surcharge si existante, sinon fichier natif consigné dans node_modules), il est impératif de respecter l’arborescence native de votre framework dans votre chemin vers le fichier surchargé.

Exemple: si je veux surcharger le fichier natif ./node_modules/uikit/src/scss/uikit.scss, je dois respecter l’arborescence suivante: ./assets/styles/uikit/src/scss/uikit.scss.

/assets/styles/uikit/src/scss/components/_import.scss: ce fichier est une surcharge de /node_modules/uikit/src/scss/components/_import.scss.

Par le biais de cette surcharge, nous pouvons:

  • Commenter les composants que nous ne souhaitons pas utiliser dans notre projet: //@import "table.scss";
  • Faire pointer les composants que nous allons utiliser en l’état fourni par le framework (sans en modifier l’aspect ou le comportement) vers la source consignée dans le dossier node_modules: @import "~@uk-components/base.scss";
  • Faire pointer les composants que nous allons surcharger (nous allons modifier l’aspect ou le comportement prévu par le framework) vers les fichiers consignés dans le dossier assets/styles: @import "link.scss";

[Docker] Importer une base de données en copiant le fichier SQL dans le container DB avec docker cp

12/05/2020 /

Nous allons utiliser la commande docker cp pour copier un fichier disponible sur notre host dans un dossier tmp du container guest:

Puis se connecter au container db et taper la commande:

ATTENTION: vous allez probablement obtenir un message mysql: [Warning] Using a password on the command line can be insecure.. Votre dump sera tout-de-même importé.

pour la petite histoire, les volumes ça s’exprime sous la forme host:guest. guest est toujours un chemin absolu. host peut être :

  • un path absolu (/bidule/…) ou relatif (./bidule, ../bidule) => un dossier ou un fichier du host est monté sur le path du guest
  • un nom (mysql-data, pas de référence absolue ou relative) => il s’agit d’un volume nommé, on n’interagit pas avec, c’est géré de manière transparente pour toi par docker. Tu peux le voir via docker volumes ls, c’est stocké normalement dans /var/lib/docker/filesystems/… ou un truc du genre

[Gulp][SASS] Exploiter l’option includePaths de gulp-sass pour définir, en cas de surcharges, un ordre de priorité des chemins vers lequels Gulp ira regarder quand il rencontrera un @import

05/05/2017 /

(Ma question) gulp-sass includePaths parameter and import of partial files declarations that are not in the main.scss issue sur Stack Overflow.

Problème: I’m using gulp-sass and would like to define a load_path so that I don’t have to have really long @import rules voor bower dependencies e.g..

…à la place de:

Quel serait le meilleur moyen pour parvenir à ce résultat en utilisant gulp-sass?

Exemple d’utilisation de l’option includePaths de gulp-sass avec les sources SCSS de Foundation 6 for Sites

ATTENTION: gulp-sass semble ne pas digérer le globbing dans les chemins.

gulpconf.json

  • config.paths.styles.src: le chemin vers vos SCSS custom
  • config.paths.styles.srcIncludePaths: dans mon exemple ci-dessous, on répète le chemin vers les SCSS custom, puis on déclare le chemin vers les surcharges de SCSS relatives aux sources de Foundation ("src/style/vendor-override/foundation-sites/scss/") puis pour finir on déclare le chemin vers les sources out-of-the-box de Foundation qui seront utilisées si Gulp ne trouve aucune surcharge (les surcharges doivent respecter l’arborescence, les noms des dossiers et des fichiers de l’original pour être prises en compte!).

gulp-sass ne supportant pas le globbing dans les chemins, il faudra déclarer des chemins très précis vers vos vendors et vos vendors-override ici. Le dossier vendors-override devra toujours respecter la même arborescence que le dossier vendor pour que l’héritage fonctionne.

gulpfile.js

main.scss

Cette partie de ma main.scss comporte un copier/coller du contenu du fichier foundation.scss qui met en place les bases du framework côté SCSS.

Je n’ai rien modifié mise à part l’ajout de mon propre fichier settings :

Gulp va d’abord chercher les fichiers à importer dans src/style/ (il n’y trouvera rien pour ce qui est de Foundation) avant de se rabattre sur src/style/vendor-override/foundation-sites/scss/, puis sur src/vendor/foundation-sites/scss/.

  • sass-include-paths – Generates include paths for node-sass for packages from popular package managers like npm, bower, ruby gem, ruby bundler.

  • What does Gulp’s includePaths do?

    The SASS compiler uses each path in loadPaths when resolving SASS @imports.

    Note that the compiler resolves each @import by considering each path in loadPaths from left-to-right (similar to $PATH in a UNIX environment). An example scenario could be:

    There was no _x.scss file in styles/i, so it moved on to look inside styles/ii. Eventually it found an _x.scss file in styles/iii and finished the lookup. It looks at each folder in loadPaths starting from the first element in the array and moving right. After attempting all paths, if we can’t find the file, then we declare that this @import statement is invalid.

    Load paths is useful if you have a external library (like bournon/neat). The external library is large and will use lots of @import statements. However they won’t match your project folder structure and so won’t resolve. However, you can add an extra folders to the loadPaths so that the @imports inside the external library do resolve.

  • gulp-sass work around for load_path support?

    After struggling with this myself I found a option in gulp-sass :

    Example:

  • Import and globbing in SASS