Vue.js组件中如何使用外部sass文件中定义的变量和混合等呢

Question

我定了一个组件：

<style lang='sass'>
    .current-position {
        $height: 36px;
        background-color: #fffed9;
        border-radius: 2px;
        overflow: hidden;
        height: $height;
        line-height: $height;
        padding: 0 10px;
        position: relative;
        &:before {
            @include border($borderColor: #ffda82);
        }

        strong {
            float: left;
        }
        div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #fd3846;
        }
    }
</style>

<template lang='jade'>
    aside.current-position
        strong(v-text='title')
        div(v-text='position')
</template>

<script lang='babel'>
    export default {
        data() {
            return {
                title: '猜你在: ',
                placeholder: '正在定位中...'
            }
        }
    }
</script>

在这个组件中需要使用border这个mixin, 在执行webpack时报错提示No mixin named border, 在webpack.config.js中是有require的

Answer 1

现在直接@import就行了

<style lang='sass'>
@import "../../scss/retinaLine";
@import "../../scss/css3Module";
...
</style>

Answer 2

npm install sass-resources-loader

Answer 3

好像@import 不能跟 xxx.sass