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

vite+vue3+ts+vant4 + sass遇见scoped不生效 #48

Open
linmiao911 opened this issue Aug 17, 2024 · 5 comments
Open

vite+vue3+ts+vant4 + sass遇见scoped不生效 #48

linmiao911 opened this issue Aug 17, 2024 · 5 comments

Comments

@linmiao911
Copy link

linmiao911 commented Aug 17, 2024

问题:

1.示例

<style lang="scss" scoped></style>

结果:
image

  1. 示例
<style lang="scss"> //@import 'src/assets/styles/base.scss'; </style>

结果:
image

配置如下:

css: {
preprocessorOptions: {
scss: {
// 引入scss全局变量文件
additionalData: @use "@/assets/styles/base.scss" as *;
}
},
postcss: './postcss.config.cjs'
},
`

postcss.config.cjs文件:

module.exports = {
plugins: [
require('postcss-mobile-forever')({
appSelector: '#app',
viewportWidth: 375,
maxDisplayWidth: 600,
rootContainingBlockSelectorList: ['van-tabbar', 'van-popup'],
exclude: [/node_modules/]
}),
require('autoprefixer')({
overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead']
})
]
}

base.scss

*,
*::before,
*::after {
box-sizing: border-box;
}
#app {
height: 100vh;
}

不清楚是什么原因,如果直接使用less在main.ts引入less样式文件则可以正常使用

@wswmsword
Copy link
Owner

是加上 scoped 之后就不转换吗?

@linmiao911
Copy link
Author

是加上 scoped 之后就不转换吗?

对的,scss加上后不转换

@wswmsword
Copy link
Owner

Ok,我这两天看看

@wswmsword
Copy link
Owner

方便给个最小包吗?
我本地用模版 vue3-vant-mobile 试了一下可以给 sass + scoped 转换。
下面图片第 49 行改成了 scss + scoped:
图片第 49 行改成了 scss + scoped
class 是 data-label 的样式成功转换:
class 是 data-label 的样式成功转换

@linmiao911
Copy link
Author

应该是我不规范导致的,我用了uno css还在写scss,可能是这个原因

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

No branches or pull requests

2 participants