使用showNotify或者使用showDialog 出错

[changfeitong]

NutUI 包名

@nutui/nutui

NutUI 版本号

4.3.8

平台

h5

重现链接

https://codesandbox.io/p/devbox/nutui4-vite-demo-forked-h2zpm4?workspaceId=a507bb32-dadf-4f16-9c4c-a0cad20f1203&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clw5yk6hz0006336i097a7zlb%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clw5yk6hz0003336i3jqervb6%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clw5yk6hz0004336i5gbatzi0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clw5yk6hz0005336i7pc1109j%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clw5yk6hz0003336i3jqervb6%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw5yk6hz0002336igtpbwiul%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.vue%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A4%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A4%252C%2522endColumn%2522%253A1%257D%255D%257D%255D%252C%2522id%2522%253A%2522clw5yk6hz0003336i3jqervb6%2522%252C%2522activeTabId%2522%253A%2522clw5yk6hz0002336igtpbwiul%2522%257D%252C%2522clw5yk6hz0005336i7pc1109j%2522%253A%257B%2522id%2522%253A%2522clw5yk6hz0005336i7pc1109j%2522%252C%2522activeTabId%2522%253A%2522clw5ykggp0049336i3r9jlkiw%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A2222%252C%2522id%2522%253A%2522clw5ykaug001v336iauj6j0k7%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clw5ykggp0049336i3r9jlkiw%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clw5yk6hz0004336i5gbatzi0%2522%253A%257B%2522id%2522%253A%2522clw5yk6hz0004336i5gbatzi0%2522%252C%2522activeTabId%2522%253A%2522clw5ykdav002w336inmzz0hbm%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clw5ykdav002w336inmzz0hbm%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

重现步骤

基础用法 <script setup lang="js">

import { showNotify } from '@nutui/nutui'
import '@nutui/nutui/dist/packages/notify/style'
const baseNotify = (msg) => {
showNotify.text(msg, {
onClose: () => {
console.log('close')
},
onClick: () => {
console.log('click')
}
})
}
</script>

期望的结果是什么？

能够显示通知栏

实际的结果是什么？

程序报错，对于showDialog 也会产生样式导入报错。

ERROR Failed to compile with 1 error 13:27:47
error in ./node_modules/@nutui/nutui/dist/packages/notify/index.scss

Syntax Error: Undefined variable.
╷
18 │ background: $overlay-bg-color;
│ ^^^^^^^^^^^^^^^^^
╵
node_modules@nutui\nutui\dist\packages\overlay\index.scss 18:15 @import
node_modules@nutui\nutui\dist\packages\popup\index.scss 1:9 @import
node_modules@nutui\nutui\dist\packages\notify\index.scss 1:9 root stylesheet

ERROR in ./node_modules/@nutui/nutui/dist/packages/notify/index.scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./node_modules/@nutui/nutui/dist/packages/notify/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable.
╷
18 │ background: $overlay-bg-color;
│ ^^^^^^^^^^^^^^^^^
╵
node_modules@nutui\nutui\dist\packages\overlay\index.scss 18:15 @import
node_modules@nutui\nutui\dist\packages\popup\index.scss 1:9 @import
node_modules@nutui\nutui\dist\packages\notify\index.scss 1:9 root stylesheet
@ ./node_modules/@nutui/nutui/dist/packages/notify/index.scss 4:14-233 15:3-20:5 16:22-241
@ ./node_modules/@nutui/nutui/dist/packages/notify/style/index.mjs 2:0-23
@ ./node_modules/unplugin/dist/webpack/loaders/transform.js?unpluginName=unplugin-vue-components!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/MyFind.vue?vue&type=script&setup=true&lang=js 2:0-49

环境信息

System:
OS: Windows 10 10.0.18362
CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
Memory: 18.23 GB / 31.95 GB
Binaries:
Node: 18.0.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.6.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.15.5 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Chrome: 124.0.6367.207
Edge: Spartan (44.18362.387.0)
Internet Explorer: 11.0.18362.1
npmPackages:
@nutui/nutui: ^4.3.8 => 4.3.8

其他补充信息

对于js或者ts都会报错。

[eiinu]

入口文件中已经引入了全局 css 样式，不需要再次引入组件的样式了。