Perfekte Lösung für den Themenwechsel basierend auf CSS-Variablen (empfohlen)

Als Baidu diese Anforderung erhielt, fand das Unternehmen in der Branche zahlreiche Lösungen zum Themenwechsel, darunter CSS-Link-Ersetzung, Klassennamenänderung, less.modifyVars, CSS in JS usw., aber jede Lösung klang ermüdend und teuer. Gibt es eine Lösung mit geringer Code-Eingriffsrate, die einfach zu verwenden und zu warten ist? Natürlich gibt es das. Genauer gesagt wird es von CSS selbst unterstützt.

CSS3-Variable

Definieren Sie eine globale Farbvariable. Wenn Sie den Wert dieser Variable ändern, ändern sich alle Elemente, die auf der Seite auf diese Variable verweisen. Ganz einfach, nicht wahr?

// Basis.weniger
:Wurzel {
  --Primärfarbe: grün;
  --Warnung: gelb;
  --info: weiß;
  --Achtung: rot;
}

// var.weniger
@primary: var(--primary)
@Gefahr: var(--Gefahr)
@info: var(--info)

// Seite.weniger
.header {
  Hintergrundfarbe: @primary;
  Farbe: @info;
}
.Inhalt {
  Rand: 1px durchgezogen @danger;
}

//ändern.js
Funktion changeTheme(ThemeObj) {
  const vars = Object.keys(themeObj).map(key => `--${key}:${themeObj[key]}`).join(';')
  document.documentElement.setAttribute('Stil', Variablen)
}

Ende dieses Artikels

Scheiße, der Internet Explorer wird nicht unterstützt! ! Wird es im Jahr 2020 noch mit IE kompatibel sein? Ja, es muss mit IE kompatibel sein.

CSS-Variablen Ponyfill

Ja, es gibt einen Polyfill, der mit IE kompatibel ist: css-vars-ponyfill. So geht es mit dem IE um

+-------------------------+
| Den Inhalt des Style-Tags auf der Seite abrufen |
| CSS-Inhalt für externen Link anfordern |
+-------------------------+
|
|
gegen
+-------------------------+ Ja +-------------------------+
| Enthält der Inhalt var() | ----> | Als src markiert |
+-------------------------+ +-------------------------+
| |
| Nein |
gegen gegen
+-------------------------+ +-------------------------+
| Als überspringen markieren | | var(*) durch variablen Wert ersetzen, |
| | | Neues Style-Tag zum Kopf hinzufügen |
+-------------------------+ +-------------------------+

Der Effekt ist wahrscheinlich wie folgt

Einfach und grob, aber dennoch elegant. Es wird nicht in Browsern verarbeitet, die CSS-Variablen unterstützen. Sie müssen sich also keine Sorgen über Leistungsprobleme machen ( das ist das Problem des Internet Explorers, nicht meines).

). Ändern wir den Code

//store/theme.js
importiere cssVars aus „css-vars-ponyfill“

Standard exportieren {
  Zustand: {
    'primär': 'grün',
    ‚Gefahr‘: ‚weiß‘
  },
  Mutationen:
    UPDATE_THEME(Status, Nutzlast) {
      const-Variablen = {}
      Object.assign(Status, Nutzlast)
      Object.keys(state).forEach((key) => {
        Variablen[`--${key}`] = Status[Schlüssel]
      })
      cssVars({
        Variablen
      })
    }
  },
  Aktionen: {
    ändereTheme({ commit }, theme = {}) {
      Commit ('UPDATE_THEME', Thema)
    }
  }
}

// router.js
// Da die Seite nach dem Routensprung bei Bedarf neue CSS-Ressourcen lädt, konvertieren Sie erneut const convertedPages = new Set()
router.afterEach((to) => {
  if (convertedPages.has(to.path)) return
  konvertierteSeiten.add(zu.Pfad)
  Kontext.store.dispatch('Thema/Thema ändern')
})

SSR-Projekt: Optimierung des Flash-Bildschirmproblems

In SSR-Projekten können Sie dies im IE mit der obigen Lösung sehen

Weil css-vars-ponyfill

Es verlässt sich zur Konvertierung auf DOM-Elemente und kann nicht im Knoten verwendet werden. Daher besteht eine Stillücke zwischen dem Server, der den nicht konvertierten CSS-Code direkt ausgibt, und dem Client, der die JS-Datei zum Konvertieren des CSS lädt.

+- - - - - - - - - - - - - - - - - - - - - - - - +
'Stilfensterperiode: '
' '
+----------+ ' +----------------+ +------------+ ' +-------------+
| Anfrage einleiten | --> ' | SSR-Direktausgabeseite | --> | JS-Abhängigkeit laden | ' --> | CSS-Variablen ersetzen |
+----------+ ' +----------------+ +------------+ ' +-------------+
' '
+- - - - - - - - - - - - - - - - - - - - - - - - +

Auch dieses Problem lässt sich ganz einfach lösen: Fügen Sie einfach an jeder Stelle, an der css var verwendet werden, eine kompatible Schreibmethode hinzu.

@_primary: rot
@primary: var(--primary)

:Wurzel{
  --primary: @_primary
}

.Thema {
  Farbe: @primary;
}

//Ändern zu .theme {
  Farbe: @_primary;
  Farbe: @primary;
}

In Browsern, die CSS-Variablen nicht unterstützen, wird die Standardfarbe red gerendert und Ponyfill ersetzt die Stilüberschreibung, nachdem JS geladen wurde.

Entwicklung von Webpack-Plugins

Das manuelle Hinzufügen kompatibler Texte an jeder Stelle ist sowohl mühsam als auch schwierig zu pflegen. Zu diesem Zeitpunkt müssen wir einige Kenntnisse über den Lebenszyklus von Webpack und die Entwicklung von Plug-Ins erwerben. Wir können ein Webpack-Plug-In manuell schreiben und allen CSS-Modulen in den Hooks von normalModuleLoader einen Loader hinzufügen ( Version v5 ist veraltet, verwenden Sie NormalModule.getCompilationHooks(compilation).loader ), um kompatiblen Code zu verarbeiten.

Das Projekt des Autors verwendet less. Beachten Sie, dass die Ausführungsreihenfolge von Loadern in Webpack der First-In-Last-Out-Reihenfolge eines Stapels ähnelt . Daher muss ich den Konvertierungsloader vor dem Less-Loader hinzufügen, um sicherzustellen, dass wir es mit dem Schreiben der kompilierten CSS-Variable und nicht mit der Less-Variable zu tun haben.

// plugin.js
exportiere Standardklasse HackCss {
  Konstruktor (Thema = {}) {
    this.themeVars = Thema
  }

  anwenden(Compiler) {
        compiler.hooks.thisCompilation.tap('HackCss', (Kompilierung) => {
          Kompilierung.hooks.normalModuleLoader.tap(
            'HackCss',
            (_, Modulkontext) => {
              wenn (/\.vue\?vue&type=style/.test(moduleContext.userRequest)) {
                // Es wird 2 Compiler für SSR-Projektisomorphismus geben. Wenn im Modul ein Loader vorhanden ist, wird er nicht hinzugefügt, wenn (hasLoader(moduleContext.loaders, 'hackcss-loader.js')) {
                  zurückkehren
                }

                let lessLoaderIndex = 0
                // Das Projekt verwendet less. Suchen Sie den Speicherort von less-loadermoduleContext.loaders.forEach((loader, index) => {
                  wenn (/less-loader/.test(loader.loader)) {
                    lessLoaderIndex = Index
                  }
                })
  
                moduleContext.loaders.splice(lessLoaderIndex, 0, {
                  loader: Pfad.auflösen(__dirname, 'hackcss-loader.js'),
                  Optionen: this.themeVars
                })
              }
            }
          )
        })
      }
    })
}

// loader.js
const { getOptions } = erfordern('loader-utils')

module.exports = Funktion(Quelle) {
  if (/module\.exports/.test(source)) returniere Quelle
  const Thema = getOptions(diese) || {}
  returniere Quelle.Ersetzen(
    /\n(.+)?var\(--(.+)?\)(.+)?;/g,
    (Inhalt, vorher, Name, nachher = '') => {
      const [Schlüssel, Einzug] = vor.split(':')
      const add = nach.split(';')[0]
      returniere `\n${key}:${indent}${theme[name]}${after}${add};${content}`
    }
  )
}

An diesem Punkt können wir fröhlich und frei die Themen wechseln.

Nachtrag

Es ist interessanter, neues Wissen aufzunehmen, indem man lernt, „zu faul zu sein, mehr Code zu schreiben“. Ich hoffe, dieser Artikel kann Ihnen helfen.

Dies ist das Ende dieses Artikels über die perfekte Lösung für den Themenwechsel basierend auf CSS-Variablen (empfohlen). Weitere relevante Inhalte zum Thema CSS-Variablen-Themenwechsel finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!