vites Standardunterstützung für CSS
In Webpack müssen wir es im Projekt installieren, css-loaderdamit Webpack CSS-Dateien erkennen kann.
vue-cliBasierend auf Webpack, darin eingebautloader
Vite unterstützt von Haus aus die direkte Verarbeitung von CSS-Dateien.
Schauen wir uns ein Beispiel an:
Wir erstellen index.html, main.js, index.css im Projektstammverzeichnis und installieren vite
In index.html führen wir main.js ein
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<script src="./main.js" type="module"></script>
<div>Vite天生就是支持对CSS文件的直接处理的。</div>
</body>
</html>
In main.js führen wir index.css ein
import "./index.css"
Dann fügen wir in index.css einen globalen Hintergrund hinzu
html,body {
background: red;
height: 100%;
width: 100%;
}
Verwenden Sie vite, um das Projekt zu starten, und Sie werden feststellen, dass die .css-Datei erkannt werden kann, ohne dass Plug-Ins installiert werden müssen.
Das Prinzip des Hinzufügens von CSS-Stil in vite
Wenn vite die in main.js referenzierte Datei liest index.css, verwendet es das fs -Modul von node, um seinen Inhalt abzurufen.
Ersetzen Sie zunächst den ursprünglichen Inhalt durch ein js-Skript (um Hot Update oder CSS-Modularisierung zu erleichtern) und setzen Sie es Content-Typegleichzeitig auf js, damit der Browser die Datei mit dem css-Suffix in Form eines JS-Skripts ausführen kann.
Erstellen Sie dann direkt ein Style- Tag und kopieren Sie den ursprünglichen Inhalt in der index.css-Datei direkt in das Style-Tag. Fügen Sie schließlich das style-Tag in index.html ein head.
CSSModul
Die obige Methode zum Importieren von Stildateien ist fehlerhaft.Wenn beispielsweise zwei .css-Dateien denselben Klassennamen definieren, wird der Stil überschrieben.
Beachten Sie, dass wir über die Entwicklung des Projekts ohne die Verwendung von Gerüsten oder Front-End-Frameworks sprechen. Wenn Sie vue verwenden, um ein Projekt zu entwickeln, kann das Scope-Attribut seines Tags dieses Problem ebenfalls lösen.
// index.css
.wrap{
background: yellow;
}
// test.css
.wrap{
background: yellow;
}
// main.js
import "./moduleA.js";
import "./moduleB.js";
// moduleA.js
import "./index.css";
const div = document.createElement("div")
document.body.appendChild(div)
div.className = "footer"
div.innerText ="别看我只是一只羊"
// moduleB.js
import "./test.css";
const div = document.createElement("div")
document.body.appendChild(div)
div.className = "footer"
div.innerText ="羊儿的聪明难以想象！"
index.html
<!DOCTYPE html>
<html lang="en">
<body>
<script src="./main.js" type="module"></script>
</body>
</html>
Anscheinend überschreiben die Stile in test.css die Stile in index.css.
Wenn ein Projekt von mehreren Personen entwickelt wird, ist es sehr üblich, doppelte Klassennamen zu haben, aber die oben genannten Probleme werden unsere Projektentwicklung offensichtlich in Schwierigkeiten bringen.
Daher löst vite dieses Problem mit Hilfe von CssModule.
Was ist CssModule: https://www.ruanyifeng.com/blog/2016/06/css_modules.html
CSS-Regeln sind global und die Stilregeln jeder Komponente gelten für die gesamte Seite.
Die einzige Möglichkeit, einen lokalen Gültigkeitsbereich zu generieren, besteht darin, einen eindeutigen Klassennamen zu verwenden, der nicht denselben Namen wie andere Selektoren hat. Das machen CSS-Module.
verwenden
Um dieses Problem mit Hilfe von CssModule zu lösen, müssen wir die Datei nur in der Art von xxx.module.css benennen.
Wir ändern index.css in index.module.css und test.css in test.module.css
Dann werden moduleA.js und moduleB.js leicht angepasst
// moduleA.js
import index from "./index.module.css";
const div = document.createElement("div")
document.body.appendChild(div)
div.className = index.wrap
div.innerText ="别看我只是一只羊"
// moduleB.js
import test from "./test.module.css";
const div = document.createElement("div");
document.body.appendChild(div);
div.className = test.wrap;
div.innerText = "羊儿的聪明难以想象";
Hinweis: Für die importierte Stildatei können wir die Datei console.log(index) drucken:
Es wird festgestellt, dass nach dem Ersetzen von css durch js das exportierte Objekt ein Objekt mit dem ursprünglichen Klassennamen und dem geänderten Klassennamen enthält.
Daher können wir den geänderten Klassennamen durch div.className = test.wrap erhalten.
Nach der Änderung können Sie sehen, dass das Stilproblem behoben wurde.
vite CSS konfigurieren
Module Option
Über das Konfigurationselement css.modules von vite.config.js können wir einige Standardinhalte von CssModule ändern, z. B. seine Funktion aktivieren oder deaktivieren, seinen Hash-Namen ändern usw.
import { defineConfig } from "vite";
export default defineConfig( {
// 对css的行为进行配置
css:{
// 是对css模块化的默认行为进行覆盖
modules:{
}
}
});
Die Konfiguration von Modulen wird tatsächlich an postcss übergeben, um es bei der Handhabung zu unterstützen. Für eine spezifische Konfiguration können Sie sich also auf postcss-modules beziehen .
Vollständige Konfiguration der Moduloption
modules: {
// 是否开启模块化
scopeBehaviour: 'global' | 'local'
// 代表你不想参与到css模块化的路径
globalModulePaths: RegExp[]
// 更改生成的哈希名称，一个字符串模板或者通过函数返回
generateScopedName:
| string
| ((name: string, filename: string, css: string) => string)
// 生成hash名称的前缀
hashPrefix: string
// 修改生成的配置对象的key的展示形式(驼峰还是中划线形式)
localsConvention:
| 'camelCase'
| 'camelCaseOnly'
| 'dashes'
| 'dashesOnly'
| null
}
UmfangVerhalten
Vorschlag zur Konfiguration: Wenn Sie ein schlechtes Gehirn haben, können Sie es ändern
Ob die Modularisierungsfunktion aktiviert werden soll.
- Optionale Argumente: 'global' | 'local'
- Standard: 'lokal'
Wir ändern den Standardwert auf global
import { defineConfig } from "vite";
export default defineConfig({
css: {
// 是对css模块化的默认行为进行覆盖
modules: {
scopeBehaviour: "global"
}
}
});
Es kann festgestellt werden, dass die modulare Funktion ausgeschaltet ist.
EinheimischeKonvention
Gibt das Format des Schlüssel-Wert-Paares zurück
Standard: camelCaseOnly
optionale Parameter
- camelCase
- camelCaseOnly
- Striche
- StricheNur
- Null
Lassen Sie uns es als camelCase konfigurieren, um es zu versuchen
import { defineConfig } from "vite";
export default defineConfig({
css: {
// 是对css模块化的默认行为进行覆盖
modules: {
localsConvention: "camelCase",
scopeBehaviour: "local"
}
}
});
// index.module.css
.table-wrap{
background: yellow;
}
// moduleA.js
import index from "./index.module.css";
console.log('index: ', index);
Es kann festgestellt werden, dass beim Referenzieren von Stilen ele.className = index[Camel Case Benennung], ele.className = index[Bindestrich-Benennung] verwendet werden kann.
camelCaseOnly
Null
Striche
StricheNur
