Tailwind CSS Warnung von Webstorm?

Wie kommt die Fehlermeldung zustande wenn ich doch alles richtig gemacht habe mit Tutorials. Das einzige was ich weg gemacht habe ist vue.app und das habe ich ja korriegiert zu index.vue in den einstellungen.

und anstatt main.css -> globaltailwind.scss und auch das habe ich in den einstellungen geändert. (Namen)

Answer 1

[Babelfish]

Wie kommt die Fehlermeldung zustande wenn ich doch alles richtig gemacht habe mit Tutorials.

Wenn du alles richtig gemacht hättest, würde es keine Warnung geben. Bringt denn der Link zu dem Problem nichts?

und anstatt main.css -> globaltailwind.scss und auch das habe ich in den einstellungen geändert. (Namen)

Wenn du den Namen von .css in .scss änderst, dann änderst du mehr als nur den Namen. Dann brauchst du nämlich noch einen SASS-Interpreter. Bei TailwindCSS, welches auf PostCSS aufsetzt, macht das meiner Meinung nach keinen Sinn bzw. macht nur Probleme.

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Answer 2

[medmonk]

Du exportierst die index.vue aus dem Root-Verzeichnis, diese liegt jedoch in Pages und wird eigentlich bereits über „./pages/**/*.vue” exportiert. Ich bin mir jetzt nicht ganz sicher, ob die index.vue nochmal explizit angegeben werden muss. Wenn du mit SCSS arbeiten möchtest, wird auch der SCSS Compiler resp. SCSS Loader benötigt.

Vue Loader:

• Vue Guide → Vue Loader: Using Pre-Processors

Sass/SCSS Loader installieren:

npm install -D sass-loader sass

Vue Guide:

You can select pre-processors (Sass/Less/Stylus) when creating the project. If you did not do so, the internal webpack config is still pre-configured to handle all of them. You just need to manually install the corresponding webpack loaders

Es reicht daher nicht aus, dein CSS einfach in SCSS umzubenennen. Zumal es bei Tailwind wenig Sinn ergibt, so wie es Babelfish schon richtig schrieb. Hinzukommt das du SCSS und Tailwind gleich zu beginn hättest anlegen können.

Wenn du dein Projekt über das Vue CLI anlegst, kannst du SCSS und Tailwind bereits darüber auswählen. Dann ist dein Projekt auch passend konfiguriert und nicht erst im Nachgang alles selber händisch anpassen musst. Ich würde dein CSS ohnehin nicht in assets ablegen, da dort eigentlich die kompilieren Daten reingehören.

Woher ich das weiß: Berufserfahrung – UI/UX Designer, Full-Stack Developer

Comments

[DotNetCreep]

Wohin soll ich css schreiben? Hab halt auf youtube gesehen das die es im assets ablegen

[medmonk]

@DotNetCreep

Ich lege für solche Zwecke immer einen src Verzeichnis mit diversen Unterordnern für SCSS und JavaScript an. Halt jene Dinge, die erst kompiliert werden müssen und jetzt kein direkter Teil eines einzelnen Vue Components sind.

Du kannst es auch im assets Verzeichnis liegen lassen. Was aber zwingend benötigt wird, ist der Vue Loader für SCSS. Ohne diese kann dein SCSS weder gelesen noch zu CSS kompiliert werden. Du musst Webpack entsprechend anpassen.