Comment utiliser Compass dans Vue

Cet article vous présente principalement la méthode d'utilisation de Compass dans Vue. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et vous donner une référence, j'espère que cela pourra vous aider.

Motivation pour écrire

Après avoir longtemps tergiversé, j'ai finalement décidé d'écrire un site Web personnel pour moi-même. il suffit d'avoir l'air cool. Même si vous voulez vous montrer, vos compétences doivent également être bonnes, alors profitez de cette occasion pour mettre en pratique des compétences que vous ne connaissez pas. Le site Web prévoit d'utiliser Vue comme framework frontal et CSS à écrire en Sass. Mais avant le début officiel, j'ai soudainement pensé que puisque Sass dispose d'un outil aussi puissant que Compass, ce serait un pas de trop pour ne pas l'utiliser. Cependant, après avoir cherché un tour, j'ai découvert qu'ils parlaient tous de la façon de l'utiliser. Sass dans le projet Vue sans Compass. Mais je ne pouvais pas abandonner un outil aussi puissant et je ne pouvais pas le pratiquer, alors j'ai continué à chercher et à essayer, et j'ai finalement réussi à utiliser Compass dans le projet, puis je suis venu le partager si cela peut aider les gens. qui ont ce besoin, c'est super aussi. Sans plus tarder, commençons à coder. Enfin, je mettrai cette démo sur GitHub (￣▽￣)~*

Construire un projet en utilisant vue-cli

vue init webpack compass-demo //撸个烧烤架
npm install normalize.css axios vuex --save//撒上一些调味料
npm install node-sass sass-loader mockjs --save-dev//刷上一些酱汁
npm install compass-mixins --save-dev//把佐料在烧烤架上准备好后放上嫩肉

Modifier la configuration

Modifier build/util.js

...
exports.cssLoaders = function (options) {
 ...
 return {
  ...
  // 将sass和scss修改为如下
  sass: generateLoaders('sass', { indentedSyntax: true, includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
  scss: generateLoaders('sass', { includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
  ...
 }
}
...

C'est aussi simple que ça

*.sass fichier dans

*.vue In le dossier

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!