Detaillierte Erklärung zum automatischen Hinzufügen eines Präfix-Plugins nach der CSS3-Verpackung: Autoprefixer

Das mit vue-cli erstellte Projektgerüst hat den Autoprefixer bereits für Sie konfiguriert und Präfixe werden ohne Änderungen automatisch hinzugefügt:

Sehen wir uns einige Konfigurationen mit dem Autoprefixer-Plugin an:

1. Die Postcss-Konfiguration wird in .postcssrc.js geschrieben,

2. Browserregeln werden in package.json geschrieben.

3. Stilbezogene Loader für die Entwicklungsumgebung (build/webpack.dev.conf.js)

4. Produktionsumgebung (build/webpack.prod.conf.js) Stilbezogene Loader

Die oben genannten Konfigurationseinstellungen müssen nicht von Ihnen selbst vorgenommen werden, da sie beim Erstellen der CLI-Gerüstumgebung konfiguriert wurden.

Sowohl die Entwicklungsumgebung als auch die Produktionsumgebung von vue-cli verwenden PostCSS und die Konfiguration ist dieselbe

Hier gibt es ein Problem. Einige Blogger im Internet sagten, dass die CSS-Präfixe vor und nach dem Verpacken des Projekts inkonsistent seien:

--Fügen Sie dem Bild unter app.vue einen Stil hinzu

img{
 Anzeige: Flex;
 transformieren: übersetzenX(200px)
}

--Der Stil von img vor der Verpackung (d. h. Entwicklungsumgebung)

--Der Stil des Bildes nach der Verpackung (d. h. Produktionsumgebung)

Aus dem Obigen ist ersichtlich, dass die CSS-Präfixe der Elemente vor und nach der Verpackung inkonsistent sind.

Dann ist die gegebene Lösung:

Wie aus dem Obigen ersichtlich, verwenden sowohl die Entwicklungsumgebung als auch die Produktionsumgebung von vue-cli PostCSS und die Konfiguration ist dieselbe. Warum sind also die CSS-Präfixe der Elemente vor und nach der Verpackung inkonsistent?

Sperrprobleme

Wir können die beiden Dateien build/webpack.dev.conf.js und build/webpack.prod.conf.js analysieren und vergleichen. Die einzigen Dinge, die CSS beeinflussen, sind der Loader, der den Stil im Modul verarbeitet, und das Plug-In, das CSS verarbeitet. Aus dem Obigen können wir ersehen, dass der Loader von Postcss, der das Präfix beeinflusst, in den beiden Links konsistent ist, sodass wir wissen, dass das Problem beim Plug-In liegt, das CSS verarbeitet.

Nach der Untersuchung wurde festgestellt, dass die Konfiguration von webpack.prod.conf.js zwei weitere CSS-Verarbeitungs-Plugins enthielt, und zwar wie folgt

ExtractTextPlugin wird zum Extrahieren und Trennen von CSS-Dateien verwendet. Das CSS-Präfix wird dadurch nicht beeinflusst. Wenn es ausgeschlossen wird, wird das Problem im Plugin OptimizeCSSPlugin gesperrt. Als wir noch einen Schritt weiter gingen und das Plugin OptimizeCSSPlugin auskommentierten und es dann verpackten und testeten, stellten wir fest, dass die CSS-Präfixe der Entwicklungsumgebung und der Produktionsumgebung identisch waren. Das war’s! ! !

Gehen wir zur offiziellen npm-Website und suchen nach diesem Typen

https://www.npmjs.com/package/optimize-css-assets-webpack-plugin

Dies ist ein Plugin zum Optimieren und Komprimieren von CSS-Code, aber es ist enttäuschend, dass es sehr wenig Dokumentation gibt.

Aber ein Schlüsselsatz fiel uns auf:

Dieses Produkt basiert auf cssnano, das auch zur optimierten Verarbeitung von CSS-Formaten, Präfixen usw. verwendet wird. Es gibt auch einen Autoprefixer-Konfigurationsparameter. Gehen Sie auf die offizielle Website https://cssnano.co/, um Autoprefixer zu finden:

Die Übersetzung hier lautet: Entfernen Sie unnötige Präfixe gemäß den Browseroptionen. Beachten Sie, dass standardmäßig keine neuen Präfixe zu CSS-Dateien hinzugefügt werden, was unser Problem behebt. Es stellt sich heraus, dass der Autoprefixer des Plugins (der standardmäßig aktiviert sein sollte) Präfixe entfernt, die es für unnötig hält, während der Autoprefixer von postcss das von uns festgelegte browserweite Präfix hinzufügt und so den Konflikt perfekt löst.

Lösung des Problems

Fügen Sie autoprefixer: false zur Eigenschaft cssProcessorOptions des Plugins OptimizeCSSPlugin in der Datei build/webpack.prod.conf.js hinzu, um es zu deaktivieren und Konflikte zu vermeiden.

Oben genannter Code:

neues OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
   ? { sicher: wahr, Karte: falsch, Autoprefixer: falsch }
   : { sicher: wahr, Autopräfixer: falsch}
 }),

abschließend

Schauen wir uns abschließend die CSS-Präfixe aus unserer Entwicklung und unserem Build an, die konsistent sein sollten:

Die Ursache des Problems ist: OptimizeCSSPlugin hängt von cssnano ab, und cssnano verfügt auch über einen Autoprefixer-Konfigurationsparameter, der zum Löschen unnötiger Präfixe verwendet wird (in einigen Browsern werden dadurch versehentlich notwendige Präfixe gelöscht), was mit dem Autoprefixer-Effekt von postcss in Konflikt steht und daher deaktiviert ist. Das gepackte entspricht nun dem Präfix des von uns festgelegten Browserbereichs.

Laut der Konfiguration des Bloggers im Internet können die Präfixe der Entwicklungsumgebung und der Testumgebung tatsächlich genau gleich gemacht werden, aber nach der Überprüfung stellte ich fest, dass dies nicht notwendig ist. Die Prämisse des Problems sind nicht inkonsistente Präfixe. Diese Konfiguration verhindert lediglich, dass Präfixe angezeigt werden, die nicht mit dem aktuellen Browser übereinstimmen. Die Stile sind weiterhin gültig. Ich persönlich denke, dass es nicht notwendig ist, die Konfiguration zu ändern, wenn es kein besonders großes Problem ist.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.