Laravel 混合：如何在继续混合之前将文件复制到目录 sass

Question

所以我的用例是我在 laravel webapp 中使用了几个不同的“主题”。我的计划是在执行实际的 mix.sass 步骤之前使用 mix.copyDirectory() 复制该主题的特定 scss 文件。我设置了一个 laravel .env 变量来控制要包含在构建中的主题。

我在 webpack.mix.js 中做了类似的事情：

mix.copyDirectory('resources/sass/' + process.env.MIX_THEME, 'resources/sass/build')
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/build/app.scss', 'public/css');

复制到 resources/sass/build 的文件包括一个 _variables.scss，它也由我的 Vue 组件导入。（因此组件共享颜色和其他通用样式）

现在，我遇到的问题是，在第一个运行（通过 npm run dev）时，我收到 _variables.scss 不在构建文件夹中的错误。第二次运行就好了！所以我认为正在发生的事情是 mix 启动了 copyDirectory，但在 copyDirectory 完成之前继续执行 js 和 sass 步骤。

所以我的问题是：有没有办法让 copyDirectory 等待完成，然后再继续其他步骤（在文档中找不到任何步骤）？或者，如果没有，是否有更好的方法来完成我想做的事情？

Answer 1

因为我的主要问题是我想从另一个文件夹中提取 Vue 组件使用的共享 SCSS 文件，所以我的解决方案最终成为这个问题的解决方案 vue.config.js to (laravel) webpack.mix.js

基本上，我在mix.options中使用globalVueStyles切换到不同的公共_variables文件，而不是在每个组件中手动导入它。

mix.options({
    extractVueStyles: true,
    globalVueStyles: 'resources/sass/' + process.env.MIX_THEME + '/_variables.scss'
});

Laravel 混合：如何在继续混合之前将文件复制到目录 sass

Laravel Mix: How to copy files to a directory before proceeding to mix sass

sass

laravel

webpack

laravel-mix