web-dev-qa-db-fra.com

Importation SCSS relative à la racine

Je suis en train de refactoriser une application Angular) et au fur et à mesure que je déplace des composants vers de nouveaux emplacements de répertoire, je constate que le traitement de @import Les chemins dans les fichiers SCSS des composants deviennent un peu fastidieux.

Par exemple, disons que j'ai le fichier src/_mixins.scss à la racine de mon application et du composant src/app/my-widget/my-widget.component.scss importe le SCSS comme tel @import '../../mixins';. Tout va bien.

Mais alors je décide que my-widget.component est vraiment un "composant partagé" sous un autre composant my-thingy.component, je crée donc un dossier shared sous src/app/my-thingy et déplacer tout ce qui se trouvait dans src/app/my-widget dans ça.

J'espère que vous êtes toujours avec moi ... Alors, maintenant j'ai src/app/my-thingy/shared/my-widget et je modifie mon fichier SCSS pour importer @import '../../../../mixins'.

Note: Ceci est un exemple simplifié. Certains chemins deviennent relativement profonds (sans jeu de mots ... ou était-ce? ) et tous ces . et / sont un peu trop.

TL; DR

Ce serait très pratique si dès le début, je pouvais importer _mixins.scss _ par rapport à la racine dans tous les fichiers SCSS de mes composants, pour que je n’aie plus à me préoccuper du @import chemins lors du refactoring. (par exemple, quelque chose dans le sens de @import '~/mixins'). Quelque chose comme ça existe?

Ce que j'ai essayé (et, malheureusement, a échoué):

  1. @import '~/mixins'; /** I had real hope for this one **/
  2. @import 'mixins'; /** Just being overly optimistic here **/
  3. @import '~//mixins'; /** Now I'm just making stuff up **/

Je comprends que je vais déjà devoir modifier mes fichiers de mod pour pointer vers le nouveau chemin du composant avec tout cela "bouger les choses", mais ... bon, un moins de chose, non?

angularsasswebpackangular-cli
27
Steve Gomez
  • Si vous utilisez Angular, consultez styles globaux , "stylePreprocessorOptions" option spécifiquement.
  • Pour webpack, vous pouvez configurer includePaths dans la configuration du plugin sassLoader.
  • Et c'est similaire pour les gulp builds, vous passez includePaths au plugin sass.

Quel que soit votre outil de compilation, sass traitera ces chemins en tant que root, vous pourrez donc les importer directement, donc avec:

includePaths: ["anywhere/on/my/disk"]

vous pouvez simplement @import 'styles' au lieu de @import 'anywhere/on/my/disk/styles'.

42
Sasxa

Vous pouvez aussi utiliser {} pour référencer le niveau supérieur du chemin du projet, par conséquent, quelque chose comme cela fonctionnera.

@import "{}/node_modules/module-name/stylesheet";
8
helcode

Les chemins de définition dépendent de votre version de Angular. Dans notre projet, Anciennes versions utilise angular-cli.json et les nouveaux utilisent angular.json puis:

à "@ angular/cli": "~ 1.7.4" utilisez angular-cli.json ce chemin:

"stylePreprocessorOptions": {
    "includePaths": [
      "../src",
      "./scss"
    ]
  },

à "@ angular/cli": "~ 7.0.6", utilisez ceci:

"stylePreprocessorOptions": {
    "includePaths": [
       "./src",
       "./src/scss"
    ]
 }
2
Serkan KONAKCI

la solution pour angular-cli est d’ajouter stylePreprocessorOptions à .angular-cli.json.

{
    "apps": [{
        ...
        "stylePreprocessorOptions": {
            "includePaths": [
                "./app/global-styles"
            ]
        },
        ...
    }]
}

si vous utilisez le rendu côté serveur, n'oubliez pas de l'ajouter à la fois pour ssr et pour la construction principale de l'application, sinon vous obtiendrez NodeInvocationException: Prerendering failed because of error: Error: Cannot find module 'C:\Users\...\ClientApp\dist-server\main.bundle.js'

{
    "apps": [{
            ...
            "outDir": "dist",
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        },
        {
            ...
            "name": "ssr",
            "outDir": "dist-server",
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        }
    ]
}
0
godblessstrawberry