Laravel Mix 中全局可访问的 sass 变量答案

【问题标题】：Globally accessible sass variables in Laravel MixLaravel Mix 中全局可访问的 sass 变量
【发布时间】：2017-11-12 10:21:12
【问题描述】：

我的目标是让以下代码在 Laravel 项目的 .vue 文件中工作：

<style scoped lang="scss">
    @import 'variables'; // <-- file not found

    // ...
</style>

目前，每当我尝试运行上述代码时，sass 编译器都会抛出“找不到文件”错误。

我现在的webpack.mix.js：

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .webpackConfig({
       resolve: {
           alias: {
               tools: 'resources/assets/sass/tools' // <-- does not work
           }
       }
   });

那么问题来了，如何配置 laravel-mix，以便能够包含全局 sass 文件无需使用相对路径？

【问题讨论】：

标签： laravel laravel-5 webpack vuejs2 laravel-mix

【解决方案1】：

这对我有用：

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, dir)
}

resolve: {
    alias: { 
        'blah': resolve('resources/assets/sass/blah')
    }
}

@import '~blah/blah'

【讨论】：

【解决方案2】：

如果你想要一个全局变量，不要在<style>标签中使用scoped

【讨论】：