Analyse, wie Vue globale Sass-Variablen einführt

Dieser Artikel stellt hauptsächlich die Analyse vor, wie Vue globale Sass-Variablen einführt. Jetzt kann ich ihn mit Ihnen teilen.

Sass oder weniger stellen Variableneinstellungen bereit. , Verwenden Sie Less- oder Sass-Variablen in Projekten, die einen Themenwechsel erfordern. In diesem Artikel wird hauptsächlich die Einführung globaler Sass-Variablen in Vue vorgestellt, die einen bestimmten Referenzwert haben Verwenden Sie Less- oder Sass-Variablen in Projekten, die das Thema ändern müssen. Bei Projekten, die in vue-cli erstellt wurden, werden alle Stile, die die Variable verwenden, entsprechend geändert. Führen Sie eine SCSS-Datei global in main.js ein, definieren Sie Variablen darin und melden Sie undefinierte Variablenfehler, wenn in anderen Komponenten oder Seiten darauf verwiesen wird. Andere Stile können normal angezeigt werden, was offensichtlich ein Kompilierungsproblem darstellt.

Dumme Referenz

Fügen Sie die globale Stildatei in jede Komponente ein, die globale Variablen verwendet

@import 'path/fileName.scss'

Aber die Komponenten oder Seiten befinden sich nicht im selben Ebenenverzeichnis und die importierten Pfade können unterschiedlich sein, also werfen wir einen Blick auf die Lösung von

.

sass-resources-loader

Sass-Resources-Loader führt globale Sass-Variablen ein

Sass-Resources-Loader kann von jedem Sass-Modul aus auf Sass-Ressourcen zugreifen, auf das zugegriffen werden muss. Sie können also gemeinsam genutzte Variablen verwenden und alle SASS-Stile mischen, ohne in jeder Datei darauf verweisen zu müssen.

Sass-Resources-Loader installieren

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

Sass-Konfiguration ändern

in

Suchen Sie im Ordner

Ändern Sie die Konfiguration des Sass-Compiler-Loadersbuild util.js

// 全局文件引入 当然只想编译一个文件的话可以省去这个函数
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)
  }
 }

Der Aufruf zum Ändern der Sass-Konfiguration lautet

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')
 }

Referenzieren Sie die Datei

in

, starten Sie den Dienst neu und die darin definierten Variablen können in anderen Komponenten verwendet werden. main.js common.scss
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Informationen zur Formularelementüberprüfungsmethode in der V-for-Schleife, wenn Vue die Elementkomponente verwendet

Einführung in das Vue-Webapp-Projekt, das native APP über HBulider verpackt

Das obige ist der detaillierte Inhalt vonAnalyse, wie Vue globale Sass-Variablen einführt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!