Analyse de la façon dont vue introduit les variables globales Sass

Cet article présente principalement l'analyse de la façon dont vue introduit les variables globales sass. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Sass ou moins fournissent des paramètres de variable. , utilisez des variables less ou sass dans les projets qui doivent changer de thème. Cet article présente principalement l'introduction des variables globales sass dans vue, qui ont une certaine valeur de référence. Les amis intéressés peuvent se référer à

sass ou moins. paramètres de variable. Utilisez des variables less ou sass dans les projets qui doivent changer de thème. Tant que vous modifiez la valeur de la variable, tous les styles utilisant la variable seront modifiés selon l'effet souhaité après la compilation. Cependant, pour les projets construits dans vue-cli. , introduisez un fichier scss globalement dans main.js, définissez-y des variables et signalez les erreurs de variable non définies lorsqu'elles sont référencées dans d'autres composants ou pages. D'autres styles peuvent être affichés normalement, ce qui est évidemment un problème de compilation.

Référence stupide

Introduire le fichier de style global dans chaque composant qui utilise des variables globales

@import 'path/fileName.scss'

Mais les composants ou les pages ne sont pas dans le même répertoire, et les chemins importés peuvent être différents, jetons donc un œil à la solution de sass-resources-loader .

sass-resources-loader introduit les variables globales sass

sass-resources-loader peut accéder aux ressources sass à partir de n'importe quel module sass auquel il faut accéder. Ainsi, vous pouvez utiliser des variables partagées et mélanger tous les styles SASS sans avoir à les référencer dans chaque fichier.

Installer sass-resources-loader

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

Modifier la configuration sass

dansbuild Recherchez util.js sous le dossier pour modifier la configuration du chargeur du compilateur sass

// 全局文件引入 当然只想编译一个文件的话可以省去这个函数
function resolveResource(name) {
 return path.resolve(__dirname, '../static/style/' + name);
}
function generateSassResourceLoader() {
 var loaders = [
  cssLoader,
  'sass-loader',
  {
   loader: 'sass-resources-loader',
   options: {
    // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
    resources: [resolveResource('common.scss')] 
   }
  }
  ];
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

L'appel pour modifier la configuration sass est generateSassResourceLoader()

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  // vue-cli默认sass配置
  // sass: generateLoaders('sass', { indentedSyntax: true }), 
  // scss: generateLoaders('sass'),
  // 新引入的sass-resources-loader
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

Référencez le fichier main.js dans common.scss , redémarrez le service et les variables qui y sont définies peuvent être utilisées dans d'autres composants.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la méthode de vérification des éléments de formulaire dans la boucle v-for lorsque vue utilise le composant Element

Introduction à l'application native d'empaquetage du projet Vue webapp via HBulider

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!