
在 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 |