web-dev-qa-db-fra.com

Sass angulaire-CLI

J'utilise la dernière version de Angular-CLI pour créer un projet Angular2. J'ai un fichier sass avec des variables dans src/assets/styles/_vars.scss. Est-il possible de configurer le compilateur sass afin que je n'aie qu'à écrire 

@import "vars";

Au lieu d'écrire le chemin complet ou le chemin relatif?

angularsassangular-cli
8
user2432409

Tu es chanceux. Voir ce pr .

Par exemple, lorsque vous utilisez sass, vous voudriez ajouter un objet stylePreprocessorOptions à la configuration de votre application dans angular-cli.json. Par exemple:

"apps": [
    {
        "stylePreprocessorOptions": {
            "includePaths": [
                "styles" // This would point to the `my-app/src/styles` directory
            ]
        }
    }
]

À partir de là, si vous avez un fichier scss tel que my-app/src/styles/_vars.scss, vous pouvez alors

@import 'vars'

dans vos fichiers scss d'applications.

N'oubliez pas de mettre à jour angular-cli à au moins 1.0.0-beta.26.

20
Brandon Silva

Utiliser stylePreprocessorOptions est une option et j’estime qu’il s’agissait d’une ancienne solution de contournement.

Maintenant, vous pouvez simplement utiliser le symbole tilde ~ comme ceci:

@import '~variables';

Je ne voudrais pas importer des fichiers _underscore, mais plutôt un point d'entrée qui permet de créer une structure interne supplémentaire dans un fichier, pensez à mixins, polices, couleurs ...

Donc, dans votre cas, ce serait quelque chose comme ça:

@import '~assets/styles/main.scss';
0
hogan