[Vite, Vue] SFC style blocks not processed

未关闭
#11,185 0 条评论 1 个 reaction 已指派 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 小时
30 天内合并 PR
35

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

NativeScript/NativeScript 的其他 Issue

查看 NativeScript/NativeScript 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。