Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report]VantCLI 构建样式不生效 #13286

Open
Tonysmark opened this issue Dec 26, 2024 · 3 comments
Open

[Bug Report]VantCLI 构建样式不生效 #13286

Tonysmark opened this issue Dec 26, 2024 · 3 comments

Comments

@Tonysmark
Copy link

Reproduction Link

https://codesandbox.io/p/devbox/vant-4-issue-template-8fuq5o?file=%2Frsbuild.config.ts%3A7%2C1

Vant Version

4.9.15

Describe the Bug

上面复现链接我不会弄 我就随便填的。。。。

我在 Fork 仓库中尝试创建一个新的组件,然后我需要使用 Vue SFC , 并且样式中还导入了一个公共文件

<style lang="scss" scoped>
@use './outer-style.scss' as *;
.container {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>

然后构建产物的样式就全没有了,除非我把 @use 这一行删除
文件层级结构如下
image

Reproduce Steps

demo-style.zip
你们可以试试把压缩包解压到 vant/src
然后构建一下看看产物
不出意外的话 vant/packages/vant/es/demo-style/components/index-sfc.css 这个文件里面啥也没有

Device / Browser

mac

@Tonysmark
Copy link
Author

我发现是 给compileStyle传参数的时候,filename 写的是 path.basename(cssFilePath) 就导致现在的问题

const styleSource = compileStyle({
  source: style.content,
--  filename: path.basename(cssFilePath),
++  filename: cssFilePath,
  scoped: style.scoped,
  id: scopeId,
  preprocessLang: style.lang as Parameters<
    typeof compileStyle
  >[0]['preprocessLang'],
});

这样改一下就好了

@wChenonly
Copy link
Contributor

wChenonly commented Dec 27, 2024

我发现是 给compileStyle传参数的时候,filename 写的是 path.basename(cssFilePath) 就导致现在的问题

const styleSource = compileStyle({
  source: style.content,
--  filename: path.basename(cssFilePath),
++  filename: cssFilePath,
  scoped: style.scoped,
  id: scopeId,
  preprocessLang: style.lang as Parameters<
    typeof compileStyle
  >[0]['preprocessLang'],
});

这样改一下就好了

因为 sass 中 @use 现需要完整的路径去解析,而之前的代码 path.basename(cssFilePath) 取了 basename

@chenjiahan 之前为啥是取basename呢?我们是否可以现在换成取完整路径

看起来是这个#12799

@Tonysmark
Copy link
Author

我发现是 给compileStyle传参数的时候,filename 写的是 path.basename(cssFilePath) 就导致现在的问题

const styleSource = compileStyle({
  source: style.content,
--  filename: path.basename(cssFilePath),
++  filename: cssFilePath,
  scoped: style.scoped,
  id: scopeId,
  preprocessLang: style.lang as Parameters<
    typeof compileStyle
  >[0]['preprocessLang'],
});

这样改一下就好了

因为 sass 中 @use 现需要完整的路径去解析,而之前的代码 path.basename(cssFilePath) 取了 basename

@chenjiahan 之前为啥是取basename呢?我们是否可以现在换成取完整路径

看起来是这个#12799

感觉取basename会不会是因为 cssFilePath 这种完整路径情况下 @/styles/vars.scss 这种情况? 因为现在看来,改成cssFilePath 之后 @/ 这种就不能正常使用了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants