So verwenden Sie Compass in Vue

Dieser Artikel stellt Ihnen hauptsächlich die Methode zur Verwendung von Compass in Vue vor. Ich werde ihn jetzt mit Ihnen teilen und Ihnen hoffentlich helfen.

Motivation zum Schreiben

Nachdem ich lange gezögert hatte, entschloss ich mich endlich, eine persönliche Website für mich zu schreiben. Das ist nicht der Fall Sie müssen nur cool aussehen. Auch wenn Sie angeben möchten, sollten Sie auch über gute Fähigkeiten verfügen. Nutzen Sie diese Gelegenheit, um Fähigkeiten zu üben, mit denen Sie nicht vertraut sind. Die Website plant, Vue als Front-End-Framework zu verwenden und CSS in Sass zu schreiben. Aber vor dem offiziellen Start dachte ich plötzlich, dass es ein Schritt zu weit wäre, es nicht zu verwenden, da Sass über ein so leistungsstarkes Tool wie Compass verfügt. Nachdem ich jedoch nach einer Runde gesucht hatte, stellte ich fest, dass alle über die Verwendung sprachen Sass im Vue-Projekt ohne Compass. Aber ich konnte ein so leistungsstarkes Tool nicht aufgeben und es nicht üben, also habe ich weiter gesucht und versucht, und schließlich gelang es mir, Compass im Projekt zu verwenden, und dann kam ich, um es zu teilen, wenn es den Menschen helfen kann die dieses Bedürfnis haben, das ist auch toll. Beginnen wir ohne weiteres mit dem Codieren. Zum Schluss werde ich diese Demo auf GitHub stellen (￣▽￣)~*

Erstellen Sie ein Projekt mit 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//把佐料在烧烤架上准备好后放上嫩肉

Konfiguration ändern

build/util.js ändern

...
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')] }),
  ...
 }
}
...

So einfach ist das

*.sass-Datei

*.vue Im Datei

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Compass in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!