这是一个创建于 684 天前的主题，其中的信息可能已经有所发展或是发生改变。
在 main 中这样引入了
import '@/assets/scss/common.scss'
common.scss 文件
@import './_mixins.scss'; //中存在 @mixin scrollbar ($width: 6px) {
@import './_vars.scss';
在组件中使用时报错 No mixin named scrollbar
<style lang="scss" scoped>
@include scrollbar;
再次引入才正常为啥？
<style lang="scss" scoped>
@import '@/assets/scss/_mixins.scss';
@include scrollbar;
 |
1
iulo 2023-01-13 13:19:36 +08:00
scss 块是独立编译的，你在 main 引入 mixin 并不能影响到 sfc 的 scss 块，参考下 vite 的 css 预编译 additionalData 配置，可以在每个 scss 文件前注入通用的工具 mixin/function/import 等，webpack 也有类似的插件
https://vitejs.dev/config/shared-options.html#css-preprocessoroptions |
 |
2
kylebing 2023-01-13 17:16:20 +08:00
全局跟文件内部的无关，可以想成是两个通道。我一般都把外部的通用方法和变量放到 _plugin.scss 中
```scss <style scoped lang="scss"> @import "../../scss/plugin"; ``` 具体可以参阅这里： https://github.com/KyleBing/diary/blob/master/src/page/invitation/InvitationList.vue |
Select Language