Laravel Mix 4.0 не может комбинировать глобальный микс css с локальным файлом css

Я столкнулся с проблемой при использовании Laravel Vue. Я поместил свой файл app.scss, а затем скомпилировал его в общую папку с помощью Laravel Mix 4.0. Я не знал, что делает это ошибкой, но это выглядит так странно для меня. Это мой webpack.mix.js

mix.webpackConfig({
  output: {
    filename: '[name].js',
    chunkFilename:'js/[id].[chunkhash].js',
    publicPath: '/',
 },
 resolve: {
    extensions: ['.js', '.vue'],
    alias: {
        '@': __dirname + "/resources"
    }
 }
});

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
    processCssUrls: false
})

У меня нет проблем при компиляции файла app.scss, но когда я добавляю @import для импорта другого файла scss в мой файл .vue

<style lang="sass">
    @import '@/sass/public.scss'
</style>

затем npm run dev у меня возникла такая ошибка при запуске программы.