[Vite, Vue] SFC style blocks not processed
@NathanWalker 已经在做这个了。
开始于 2026年4月24日。
评估
这个 Issue 还没有评估数据。
描述
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
- I have searched the existing issues as well as StackOverflow and this has not been posted before
- This is a bug report
- I agree to follow this project's Code of Conduct
- 主要语言
- TypeScript
- 星标
- 25.7k
- 派生
- 1.7k
- 平均合并
- 1 天 5 小时
- 30 天内合并 PR
- 35
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
NativeScript/NativeScript 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 65/100
NativeScript/NativeScript#11068 ·
-
bug-pending-triage
难度 3/5 1-2 天 新手友好度 66/100
NativeScript/NativeScript#11436 ·
-
难度 4/5 3-5 天 新手友好度 45/100
NativeScript/NativeScript#11421 ·
-
bug-pending-triage
难度 3/5 1-2 天 新手友好度 52/100
NativeScript/NativeScript#11415 ·
-
bug-pending-triage
难度 3/5 1-2 天 新手友好度 48/100
NativeScript/NativeScript#11374 ·
查看 NativeScript/NativeScript 的全部 Issue
相似的 Issue
-
bug
难度 2/5 1-3 小时 新手友好度 72/100
-
难度 1/5 1 小时以内 新手友好度 85/100
-
check:passed streams:add
难度 2/5 1-3 小时 新手友好度 68/100
-
难度 2/5 1-3 小时 新手友好度 76/100
-
难度 2/5 1-3 小时 新手友好度 68/100