Importation SCSS par rapport à la racine

Question

Je suis dans le processus de refactoring Angulaire de l'application et que je me déplace composants autour pour de nouveaux emplacements de répertoire, je suis la recherche que des relations @import chemins d'accès dans les composants fichiers SCSS est d'obtenir un peu fastidieux.

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

Mais ensuite, j'ai décider qu' my-widget.component est vraiment être un "composant partagé" en vertu d'un autre composant my-thingy.component, j'ai donc créer un shared le dossier en vertu de l' src/app/my-thingy et de déplacer tout ce qui était en src/app/my-widget en elle.

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

Note: Ceci est un exemple simplifié. Certains des chemins obtenir relativement profond (sans mauvais jeu de mots... ou était-il?) et tous ces . et / sont un peu beaucoup.

TL;DR

Il serait super pratique si depuis le début que je pouvais avoir juste importé _mixins.scss par rapport à la racine de l'ensemble de mes composants SCSS fichiers donc je n'ai pas garder de jouer avec l' @import chemins de refactoring. (par exemple, quelque Chose le long des lignes de @import '~/mixins'). Fait quelque chose comme ça existent?

Ce que j'ai essayé (et, malheureusement, ne fonctionne pas):

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 suis déjà allez avoir à modifier mes fichiers mod pour pointer vers le nouveau chemin d'accès du composant avec l'ensemble de ce "déplacement des trucs autour de", mais... hé, une chose de moins, non?

Answer 1

• Si vous utilisez Angulaire de la CLI, prendre un regard sur les styles Globaux, "stylePreprocessorOptions" option en particulier.
• Pour webpack, vous pouvez configurer includePaths dans sassLoader de configuration du plugin.
• Et c'est pareil pour gulp construit, vous passez includePaths de la sass plugin.

Quel que soit votre outil de construction est, sass traitera les chemins de la racine, de sorte que vous pouvez les importer directement, donc avec:

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

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

Answer 2

Vous pouvez également utiliser {} pour référencer le niveau supérieur du chemin du projet, donc quelque chose comme ça fonctionnera.

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

Answer 3

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

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

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

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

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

Answer 4

solution pour angular-cli consiste à ajouter stylePreprocessorOptions à .angular-cli.json .

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

si vous utilisez le rendu côté serveur, n'oubliez pas d'ajouter ceci pour ssr et la construction de l'application principale - 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"
                ]
            },
            ...
        }
    ]
}