Source: Webpack sass loader resolve absolute path
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const path = require('path'); const Encore = require('@symfony/webpack-encore'); [...] Encore .addAliases({ '@uk': path.resolve(__dirname, './node_modules/uikit/src/scss'), '@uk-components': path.resolve(__dirname, './node_modules/uikit/src/scss/components'), '@uk-theme': path.resolve(__dirname, './node_modules/uikit/src/scss/theme') }) [...] |
|
1 2 3 4 5 6 7 8 |
// @import uikit // https://getuikit.com/docs/sass#how-to-build // @import your custom variables and variables overwrites here. @import "~uikit/src/scss/variables.scss"; // @import your custom mixin overwrites here. @import "~uikit/src/scss/mixins.scss"; @import "~uikit/src/scss/uikit.scss"; // Cherche d'abord l'existence d'une surcharge (./assets/styles/uikit/src/scss/uikit.scss) avant de pointer vers ./node_modules/uikit/src/scss/uikit.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.
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";
|
1 2 3 4 5 |
// Base @import "~@uk-components/base.scss"; // Fichier natif. Pointe vers: ./node_modules/uikit/src/scss/components/base.scss // Elements @import "link.scss"; // Surcharge. Pointe vers: ./assets/styles/uikit/src/scss/components/link.scss |