如何在 .vue 文件中使用来自 .scss 文件的 mixins？答案

【问题标题】：How to use mixins from .scss files in .vue files?如何在 .vue 文件中使用来自 .scss 文件的 mixins？
【发布时间】：2018-09-16 01:27:33
【问题描述】：

尝试在 Single Vue 组件中使用我的 scss 混合时出现错误 - “没有名为 sm 的混合” - sm 是我的混合变量名称。

我的 _mixins.scss 在我的 assets/styles 文件夹中。如何在 .vue 文件中使用我的 mixin？

【问题讨论】：

标签： vue.js

【解决方案1】：

你可能需要将你的 mixin 所在的文件导入到试图访问它的组件中。

类似：

<template>
  <div>
    <h1>Example Component Template...</h1>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent'
},
</script>

<style lang="scss">
@import '../assets/styles/mixins.scss';

// Now you can use your mixin here...

</style>

【讨论】：

嗨，Max，感谢您的回复。但我正在寻找一种更清洁的方法，因为它猜测导入每个 vue 组件非常重复......如果没有@import，我怎样才能使我的 sass 变量和 mixins 可用？

【解决方案2】：

已更新：我找到了答案。

我会将下面的链接留给以后可能遇到此问题的其他人。

全局导入 sass/scss

https://github.com/vuejs-templates/webpack/issues/149

https://github.com/vuejs/vue-loader/issues/883#issuecomment-317557131

vue.js: always load a settings.scss file in every vue style section

我还发现有文档： https://vue-loader.vuejs.org/en/configurations/pre-processors.html

【讨论】：