[Vite, Vue] SFC style blocks not processed

オープン
#11,185 コメント 0 件 リアクション 1 件 担当者 1 名 GitHub で見る

@NathanWalker がすでに取り組んでいます。

2026年4月24日 から。

評価

この issue はまだ評価されていません。

説明

in progress
Issue Description

Using the official https://github.com/NativeScript/ns-vue-vite-demo as proof of concept.

When using Vite, the bundler will not detect <style> sections in Vue components.

  • CSS processing itself works.
  • Global styles in app.css - works, included in bundle.mjs.
  • Inline style="...", tailwind - works
  • SFC style tags - not processed, not included in the bundle.

Tested with @nativescript/vite v1, v2 up to 8.0.0-alpha.5.

http://192.168.0.21:5173/ns/sfc/src/components/Home.vue?vue&type=template - works
http://192.168.0.21:5173/ns/sfc/src/components/Home.vue?vue&type=script - works
http://192.168.0.21:5173/ns/sfc/src/components/Home.vue?vue&type=style - returns the error:

// [sfc] transform miss kind=variant path=/src/components/Home.vue?vue&type=style
throw new Error("[ns/sfc] transform failed for variant: /src/components/Home.vue?vue&type=style");
export {}

https://github.com/NativeScript/NativeScript/blob/850eafda841170dfce04a876c4236a3ed95f8222/packages/vite/hmr/server/websocket.ts#L4005-L4009
hasStyle: false here hints at this being an unfinished feature.

Reproduction
git clone https://github.com/NativeScript/ns-vue-vite-demo

Add anywhere in src/components/Home.vue:

<StackLayout class="tests" background="white">
  <Label text="Global CSS: expect red"  class="test-global-css" />
  <Label text="Inline CSS: expect blue" style="color: blue"/>
  <Label text="SFC style section: expect green" class="test-sfc-css" />
</StackLayout>

Add to the bottom of src/components/Home.vue:

<style scoped>
.test-sfc-css {
  color: green; /* ignored */
}
</style>

Add to src/app.css

.test-global-css {
  color: red; /* works */
}

Expected 3rd Label to be green.

Relevant log output (if applicable)
[ns]   [hmr][vue-reset][meta] /src/components/Home.vue {
[ns]     "path": "/src/components/Home.vue",
[ns]     "hasScript": true,
[ns]     "hasTemplate": true,
[ns]     "hasStyle": false, <-------------------------------[ should be true if <style> section present ]
[ns]     "scriptExports": [],
[ns]     "scriptHasDefault": false,
[ns]     "templateHasRender": true,
[ns]     "hmrId": "390a8663"
[ns]   }
Environment

✔ Getting environment information

There seem to be issues with your configuration.
✔ Getting NativeScript components versions information...
✔ Component nativescript has 9.0.5 version and is up to date.
✔ Component @nativescript/core has 9.0.18 version and is up to date.
✔ Component @nativescript/ios has 9.0.3 version and is up to date.
✔ Component @nativescript/android has 9.0.3 version and is up to date.
✔ Your ANDROID_HOME environment variable is set and points to correct directory.
✔ Your adb from the Android SDK is correctly installed.
✔ The Android SDK is installed.
✔ A compatible Android SDK for compilation is found.
✔ Javac is installed and is configured properly.
✔ The Java Development Kit (JDK) is installed and is configured properly.
✔ CocoaPods update is not required.
✔ Your current CocoaPods version is newer than 1.0.0.
✔ Python installed and configured correctly.
✖ WARNING: Xcode is not installed or is not configured properly.
You will not be able to build your projects for iOS or run them in the iOS Simulator.
To be able to build for iOS and run apps in the native emulator, verify that you have installed Xcode.

✖ WARNING: xcodeproj is not installed or is not configured properly.
You will not be able to build your projects for iOS.
To be able to build for iOS and run apps in the native emulator, verify that you have installed xcodeproj.

✖ WARNING: CocoaPods is not installed or is not configured properly.
You will not be able to build your projects for iOS if they contain plugin with CocoaPod file.
To be able to build such projects, verify that you have installed CocoaPods (sudo gem install cocoapods).

Your environment is not configured properly and you will not be able to execute local builds.
Verify that your environment is configured according to the system requirements described at
https://docs.nativescript.org/setup/macos.


[ ! ] NOTE: testing on Android, iOS setup is not used - related warnings unlikely to be the cause here.

Please accept these terms
主要言語
TypeScript
スター
25.7k
フォーク
1.7k
平均マージ
1日 5時間
マージ済み PR(30日)
35

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

NativeScript/NativeScript のほかの issue

NativeScript/NativeScript の issue をすべて見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。