Comment écrire scss dans un fichier .vue ?

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.

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!