Maison >interface Web >Voir.js >Comment écrire scss dans un fichier .vue ?

Comment écrire scss dans un fichier .vue ?

青灯夜游
青灯夜游original
2020-11-23 10:09:192216parcourir

Méthode : Installez d'abord les dépendances [node-sass et sass-loader] puis ouvrez le fichier [webpack.base.conf.js] et ajoutez enfin les règles scss dans la règle ; < /style>】Écrivez le style scss dans la balise.

Comment écrire scss dans un fichier .vue ?

L'environnement d'exploitation de ce tutoriel : Système Windows 7, Vue version 2.9.6 Cette méthode convient à toutes les marques d'ordinateurs.

Utiliser scss dans le projet vue

1. Installez d'abord les dépendances

npm install node-sass sass-loader --save-dev

2. Recherchez build dans webpack.base.conf.js, ajoutez la règle rules scss

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}
dans
3. Utilisez
<style lang=&#39;scss&#39;>
</style>

Introduire scss dans le projet vue globalement

1. La référence globale doit être installéesass-resources-loader

npm install sass-resources-loader --save-dev

2. >buildutils.js dans changer

scss: generateLoaders('sass')

en

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        //你自己的scss全局文件的路径
      resources: path.resolve(__dirname, '../src/style/common.scss')
    }
  }
)

Recommandations associées :


2020 front -fin Résumé des questions d'entretien Vue (avec réponses)

Recommandation du didacticiel Vue : 2020 dernières sélections de didacticiels vidéo 5 vue.js

Pour plus de programmation -connaissances connexes, veuillez visiter :
Introduction à la programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Qu'est-ce que vue.jsArticle suivant:Qu'est-ce que vue.js