web-dev-qa-db-fra.com

vue.js: charge toujours un fichier settings.scss dans chaque section de style de vue

Je me retrouve à répéter ce même modèle dans chaque fichier .vue, afin d'utiliser des variables, etc.:

<style lang="scss">
  @import "../styles/settings.scss";

  .someclass { color: $some-variable; }
</style>

ou si c'est niché dans un dossier, je dois me rappeler de faire attention au chemin:

<style lang="scss">
  @import "../../styles/settings.scss";

</style>

Existe-t-il un moyen d'importer globalement ce fichier settings.scss dans chaque fichier .vue que je crée? J'ai consulté la documentation et je ne l'ai pas vu, mais c'est peut-être ce que j'ai manqué ou c'est quelque chose que j'ai besoin d'utiliser Webpack pour le faire?

18
Drew

Les documents officiels ont été mis à jour depuis que j'ai posé cette question: https://vue-loader.vuejs.org/en/configurations/pre-processors.html

Pour ceux qui verront cela en 2017 et au-delà, consultez les instructions dans «Chargement d'un fichier de paramètres globaux».

8
Drew

Je me suis battu avec la même question pendant un moment. Mais il y a une solution très simple. Cette fonctionnalité vient de node-sass elle-même.

afin que vous puissiez déclarer vos globales scss dans un fichier, dites globals.scss dont le chemin est:

/src/scss/globals.scss

Maintenant, vous pouvez simplement éditer la config vue-loader:

loaders: {
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/scss/globals"',
  scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/scss/globals";'
}

et le tour est joué! Les globales scss sont disponibles pour tous vos composants vue. J'espère que ça aide!

Mettre à jour:

De nombreux paramètres ont été mis à jour dans les nouvelles versions de Vue. Les modifications ci-dessus peuvent donc ne pas sembler évidentes dans les derniers projets en vue. Je vais donc expliquer comment tout est lié-

Version courte:

Trouvez build/utils.js qui contiendrait une méthode (probablement nommée cssLoaders()). Cette méthode retournerait un objet comme ceci:

return {
   ...
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
   ...
  }

Vous devez simplement changer la ligne spécifique scss/sass en quelque chose comme ceci:

 return {
   ...
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";']),
   ...
  }

Version longue:

webpack.base.conf.js contient vue-loader dedans, cela ressemblerait à ceci:

    ...    
    {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
        },
    ...

La variable vueLoaderConfig est importée du fichier vue-loader.conf.js, ce qui correspond à cet objet:

    {
      loaders: utils.cssLoaders( Obj ),  // actual settings coming from cssLoader method of build/utils.js
      transformToRequire: {
       //some key value pairs would be here
      }
    }

dans le fichier build/utils.js, nous trouvons la méthode cssLoaders() qui renvoie: ....

     return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
      }

Vous devez simplement mettre à jour le code ci-dessus avec la configuration scss mise à jour comme ceci:

       ...
        {
           ...
            scss: generateLoaders(['css', 'sass?data=@import"~assets/scss/main";']),
           ...
         }
        ...

Ainsi, les variables/mixins écrites dans le fichier src/assets/scss/main.scss seront disponibles pour tous vos composants.

12
Anish K.

Je pense que vous utilisez webpack? Vous pouvez exiger le fichier settings.scss dans votre fichier app.js, quelque chose comme ceci

require("!style!css!sass!./file.scss");

d'où quand il est compilé. Tous vos composants vont l'obtenir. Vous n'aurez pas à l'exiger sur chacun d'eux.

11
highFlyingSmurfs

Si vous utilisez le modèle Vue Webpack, vous pouvez le corriger avec une ligne de code dans build/utils.js: scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";'])

Ensuite, dans src/assets/styles/app, vous ajoutez tous les @imports et le tour est joué!

7
Joan Mira

Je ne crois pas que vous puissiez importer globalement un fichier. Je ne ferais probablement pas cela de toute façon, ce n'est pas assez explicite. Si quelqu'un veut déplacer ce composant dans un autre projet, il doit avoir non idée qu'il s'appuie sur ce fichier.

Vous pouvez toutefois faciliter beaucoup la gestion des chemins. Vous pouvez ajouter ceci à votre fichier de configuration webpack ...

sassLoader: {
  includePaths: [
    path.resolve(__dirname, './sass')
  ]
},

Vous pouvez ensuite inclure librement des fichiers du répertoire racine /sass de votre projet sans vous soucier des chemins.

4
Bill Criswell

Si vous stockez tous vos composants dans le même répertoire, le chemin d'accès à votre fichier settings.scss restera toujours le même.

C'est la fonctionnalité désirée de webpack. Le principe est d’avoir le moins possible de globals et d’inclure uniquement ce dont vous avez besoin, tout en maintenant votre projet svelte, efficace et facile à raisonner.

Peut-être devriez-vous restructurer vos composants/styles de manière à ne pas avoir autant de styles personnalisés dans chaque composant Vue (construire votre propre bootstrap?), Sans avoir à inclure une feuille de style particulière dans chaque composant Vue.

Cela ne répond pas vraiment à votre question, mais pourrait vous aider à vous aligner sur les principes qui sous-tendent les outils avec lesquels vous avez choisi de travailler.

Bonne chance!

3
Jared Reich

Pour les utilisateurs utilisant Vue CLI, lisez https://cli.vuejs.org/guide/css.html#css-modules . Exemple:

// vue.config.js
const fs = require('fs')

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/variables.scss";`
      }
    }
  }
}

Cela a réglé le problème pour moi parfaitement.

3
Edgar Quintero

Été là - malheureusement, il n'y a pas moyen de faire cela sans importer le fichier dans chaque composant. Pour résoudre ce problème, vous pouvez essayer de créer des classes auxiliaires avec color: $some-variable et background-color: $some-variable qui peuvent couvrir certains 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 plusieurs fois les règles de style.

Sinon, je créerais des fichiers .scss séparés pour chaque composant. Vous pouvez toujours utiliser les modèles .vue pour html et js, mais gardez vos styles séparés. C'est probablement le moyen le plus efficace de le faire.

1
Jeff

Ma solution est de définir le dossier du fichier settings.scss comme alias dans Webpack,

peut-être que settings.scss n'est pas une nécessité globale, peut-être avez-vous également besoin d'un fichier similaire à setting2.scss, mais settings.scss est en conflit avec setting2.scss, vous pouvez uniquement choisir d'introduire un fichier dans ce cas.

la configuration du webpack ressemble à ceci:

resolve: {
  alias: {
    '~src': path.resolve(__dirname, '../src'),
    '~styles': path.resolve(__dirname, '../src/styles'),
}

alors, vous pouvez importer settings.scss dans votre composant

<style lang="scss">
   @import "~styles/settings.scss";
</style>
0
Surmon