vue 如何全局引入 scss 文件

This topic created in 1237 days ago, the information mentioned may be changed or developed.

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

2 replies

iulo

Jan 13, 2023

scss 块是独立编译的，你在 main 引入 mixin 并不能影响到 sfc 的 scss 块，参考下 vite 的 css 预编译 additionalData 配置，可以在每个 scss 文件前注入通用的工具 mixin/function/import 等，webpack 也有类似的插件

https://vitejs.dev/config/shared-options.html#css-preprocessoroptions

kylebing

Jan 13, 2023

全局跟文件内部的无关，可以想成是两个通道。我一般都把外部的通用方法和变量放到 _plugin.scss 中

```scss
<style scoped lang="scss">
@import "../../scss/plugin";

```

具体可以参阅这里： https://github.com/KyleBing/diary/blob/master/src/page/invitation/InvitationList.vue