vue.js: toujours charger un des paramètres.scss fichier dans chaque vue de la section style
Je me retrouve à répéter le même modèle dans tous les .vue de fichier, afin d'utiliser des variables, etc.:
<style lang="scss">
@import "../styles/settings.scss";
.someclass { color: $some-variable; }
</style>
ou si elle est imbriquée dans un dossier que j'ai à vous rappeler d'être prudent avec le chemin d'accès:
<style lang="scss">
@import "../../styles/settings.scss";
</style>
Est-il un moyen de l'échelle mondiale à l'importation que settings.scss
fichier dans chaque .vue de fichier que j'ai créer? J'ai regardé dans la doc et de ne pas le voir, mais peut-être que je l'ai raté, ou peut-être que c'est quelque chose que j'ai besoin de tirer parti de webpack faire?
Vous devez vous connecter pour publier un commentaire.
J'ai lutté avec la même question pendant un moment. Mais il y a une solution très simple. Cette fonctionnalité vient par nœud-sass lui-même.
de sorte que vous pouvez déclarer votre scss globales dans un fichier, disons
globals.scss
dont le chemin est:Maintenant, vous pouvez simplement modifier la
vue-loader
config:et le tour est joué! Vous avez le scss globals disponible sur tous vos vue des composants. Espérons que cela aide!
Mise à jour:
Beaucoup de paramètres ont été mis à jour dans les nouvelles versions de vue. Donc, les changements ci-dessus peut ne pas sembler trvial dans les derniers projets vue. Je vais donc brièvement comment tout est lié-
Version courte:
Trouver
build/utils.js
qui contiendrait une méthode (plus probablement nommécssLoaders()
). Cette méthode retourne un objet comme ceci :Vous avez simplement besoin de changer le
scss/sass
ligne spécifique à quelque chose comme ceci:Version Longue:
webpack.base.conf.js
contientvue-loader
, il ressemblerait à quelque chose comme ceci :La
vueLoaderConfig
variable est importé à partir de lavue-loader.conf.js
fichier, qui est égal à cet objet:dans
build/utils.js
fichier, nous trouvons lecssLoaders()
méthode qui renvoie:....
Vous avez simplement besoin de mettre à jour le code ci-dessus avec la mise à jour
scss
de configuration comme ceci:Ainsi, les variables/mixin écrit dans
src/assets/scss/main.scss
fichier sera disponible sur l'ensemble de vos composants.Je pense que vous êtes en utilisant webpack?
Vous pouvez exiger la
settings.scss
fichier dans votre app.js fichier de quelque chose comme celac'est pourquoi lorsqu'il est compilé. Tous vos composants de l'obtenir. Vous n'aurez pas besoin sur chacun d'eux.
require
ligne à la fois l'Application.vue et main.js de fichier et n'ont pas eu de succès.Les docs officielles ont été mis à jour depuis que j'ai posé cette question: https://vue-loader.vuejs.org/en/configurations/pre-processors.html
Pour toutes les personnes qui consultent cette en 2017 et au-delà, consultez les instructions de la rubrique "chargement global fichier de paramètres'.
Si vous utilisez la Vue webpack modèle, vous pouvez le fixer avec une ligne de code dans
build/utils.js
:scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";'])
Puis, dans
src/assets/styles/app
, vous ajoutez tous les @importations et voilà!!Je ne crois pas que vous pouvez à l'échelle mondiale de l'importation d'un fichier. Je n'aurais probablement pas le faire de toute façon, il n'est pas assez explicite. Si quelqu'un veut aller de ce composant dans un autre projet, ils auraient pas idée qu'il s'appuie sur ce fichier.
Vous pouvez, cependant, faire le chemin de gestion beaucoup plus facile. Vous pouvez ajouter ceci à votre webpack fichier de config...
Ensuite, vous pouvez inclure des fichiers à partir de vos projets racine
/sass
répertoire librement sans se soucier des chemins.Pour les utilisateurs à l'aide de Vue de la CLI, lire https://cli.vuejs.org/guide/css.html#css-modules. Exemple:
Cela, il fixe parfaitement pour moi.
Si vous stockez tous vos composants dans le même répertoire, votre chemin d'accès à vos paramètres.scss restera toujours la même.
C'est la fonctionnalité désirée de webpack. Le principe est d'avoir peu de globals que possible et inclure uniquement ce dont vous avez besoin, en gardant votre projet lean, efficace, et facile à comprendre.
Peut-être que vous devez restructurer vos composants/style de telle sorte que vous n'avez pas beaucoup de styles personnalisés dans chaque Vue de composant (construire votre propre bootstrap?), par conséquent, vous n'aurez pas à inclure un certain feuille de style à l'intérieur de chaque Vue de composant.
Ce n'est pas vraiment répondre à votre question, mais il peut vous orienter vers un alignement avec les principes qui sous-tendent les outils que vous avez choisi de travailler avec.
Bonne chance!
Été là - il n'est malheureusement pas le moyen de le faire sans importer le fichier dans chaque composante. Pour contourner ce problème, vous pouvez essayer de créer des classes d'aide avec
color: $some-variable
etbackground-color: $some-variable
qui peut couvrir une partie de vos cas d'utilisation.Si vous importez un fichier dans chacun d'eux, assurez-vous qu'il ne contient que des variables. Vous ne voulez pas inclure les règles de style à plusieurs reprises.
Sinon, je voudrais créer des
.scss
fichiers pour chaque composant. Vous pouvez toujours utiliser.vue
des modèles html et js, mais gardez vos styles distincts. C'est probablement la façon la plus efficace de le faire.Ma solution est de définir la
settings.scss
fichier du dossier d'un alias dans webpack,peut-être
settings.scss
n'est pas besoin, vous êtes peut-être également besoin d'un comme setting2.scss fichier, maissettings.scss
est en conflit avec setting2.scss, vous pouvez seulement choisir d'introduire un fichier dans ce cas.webpack config comme ceci:
vous pouvez importer
settings.scss
dans votre composant