4
votes

Comment ajouter un fichier scss global dans Vue.JS qui sera compilé?

J'essaye d'importer un fichier scss dans mon projet VueJS, où il se compilera ensuite et pourra donc l'utiliser avec mon projet. Cependant, j'ai besoin d'aide, car à l'heure actuelle, il s'agit simplement d'erreurs. Y a-t-il un moyen de faire cela? Veuillez noter que je suis très nouveau dans VueJS, donc je ne fais que comprendre les bases.

J'ai créé un dossier appelé scss dans mon dossier src, qui contient mon fichier main.scss. Ensuite, dans mon Vue.JS, j'ai le code suivant;

<template>
  <div id="app">
    <Home></Home>
    <Primary></Primary>
    <Secondary></Secondary>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import Primary from './components/Primary.vue'
import Secondary from './components/Secondary.vue'

export default {
  name: 'app',
  components: {
    'Home': Home,
    'Primary': Primary,
    'Secondary': Secondary
  }
}

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/main.scss";
        `
      }
    }
  }
};

</script>

<style lang="scss">
#app {
    display:block;
}
</style>

javascript vue.js vuejs2

0 commentaires

5 Réponses :

1
votes

J'ai mis à jour la balise de style pour inclure l'instruction d'importation et cela fonctionne.

@import 'scss/main.scss';

#app {
    display:block;
}
</style>

0 commentaires

2
votes

Cela dépend de ce que vous avez utilisé pour créer un projet Vue, mais lorsque vous utilisez l'outil Vue CLI 3, vous pouvez le configurer dans votre fichier vue.config.js situé à votre racine. Ce fichier est pour la configuration de votre projet Vue et est beaucoup utilisé pour écraser la configuration de votre webpack (qui n'est pas là sauf si vous éjectez).

npm install -D sass-loader node-sass

Après cela, vous pouvez ajouter ceci à votre fichier vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "./src/main.scss";
                `,
            },
        },
    },
}

Et puis vous pouvez tout importer vos fichiers scss dans votre main.scss . De cette façon, vous pouvez également utiliser des variables dans vos composants. Personnellement, je ne recommanderais pas d'avoir des feuilles de style séparées. Si votre projet est mis à l'échelle, vous supprimerez probablement des composants et vous retrouverez ensuite des styles que vous n'utilisez plus. Si vous écrivez votre scss dans les composants eux-mêmes, vous supprimerez également les styles lorsque vous supprimerez votre composant. J'irais pour seulement quelques styles globaux dans un fichier séparé et un fichier pour vos variables. J'espère que cela vous aidera.

1 commentaires

Votre approche a du sens et je pense que c'est un meilleur processus de travail que ce que j'ai maintenant.Cependant, l'édition du fichier vue.config, js et l'utilisation de la méthode d'importation avec le chemin de fichier correct ne rendent aucun style. Par conséquent, comme vous le dites, cela doit être lié à la CLI que j'utilise, je suppose.

0
votes

Il existe des solutions à cette situation.

importez votre css global dans index.html.
importez votre fichier css dans le composant actuel.
supposons que vous utilisez le rendu côté serveur avec nuxt , alors vous pouvez mettre votre css sur nuxt.config Fichier .js .
vous pouvez utiliser webpack

0 commentaires

6
votes

pour simplifier, utilisez simplement cette astuce

créez un fichier appelé vue.config.js (s'il n'a pas été créé automatiquement par vue-cli lors de la création de votre projet)
ajoutez ce code à votre fichier créé

        sass: { //the change was made here (match the option name with file extension)
            prependData: `
            @import "@/assets/scss/main.sass";
            `
        }

le @ signifie src dir cela signifie que @ / assets est identique à src / assets
Je suppose que vous avez le fichier main.scss , où vous incluez tous vos sous-fichiers scss si vous voulez savoir comment il est fait, jetez un œil ici c'est vraiment cool de travailler avec
prependData peut ne pas fonctionner ou générer une erreur, la raison pour laquelle je les ai utilisés est que j'utilise "sass-loader": "^ 8.0.2" . voici quelques informations utiles

sur "sass-loader": "^ 7. *. *" essayez d'utiliser data

sur "sass-loader": "^ 8.0.2" essayez d'utiliser prependData

sur "sass-loader": "^ 9.0.0" essayez d'utiliser additionalData

après cela, arrêtez le serveur et relancez-le pour charger les nouvelles configurations que nous avons faites dans vue.config.js
si vous travaillez avec vuetify , cela peut générer une erreur, alors assurez-vous que vous faites correspondre le nom du processeur avec l'extension, comme si vous avez des fichiers .scss que vous devra utiliser ces configurations

        scss: { //the change was made here (match the option name with file extension)
            prependData: `
            @import "@/assets/scss/main.scss";
            `
        }

si vous utilisez le fichier .sass , utilisez ces configurations

module.exports = {
    css: {
      loaderOptions: {
        sass: {
            prependData: `
            @import "@/assets/scss/main.scss";
            `
        }
      }
    }
  };

4 commentaires

salut! Je suis la même manière d'inclure les styles globalement, mais pour certaines raisons, l'utilisation d'une variable dans un composant me donne une erreur de CSS invalide. La définition de styles dans le fichier de style global n'affecte pas non plus mon composant. Luttez pour comprendre pourquoi.

assurez-vous que votre balise style a l'attribut lang dans votre composant Vue afin qu'elle ressemble à