Question

我已在我的应用程序中实现了Laravel-Mix，并将文件从node_module复制到我的assets文件夹，而不是编译我的scss。由于复制过程很慢，我的scss无法找到依赖库。有没有办法延迟sass构建并在复制任务完成后触发它？

这是我的webpack

 let mix = require('laravel-mix');    
 mix.copy('node_modules/ionicons', 'resources/assets/css/libs/ionicons')
 mix.sass('resources/assets/css/sass/app.scss', 'public/dist');

以下是我的app.scss

@import '../libs/ionicons/dist/css/ionicons';
@import 'header';

这是我得到的错误

95% emitting ERROR  Failed to compile with 2 errors7:38:04 PM

 error  in ./resources/assets/css/sass/app.scss

Module build failed:
@import '../libs/ionicons/dist/css/ionicons';
^
      File to import not found or unreadable: ../libs/ionicons/dist/css/ionicons.

Answer 1

使用tilda导入器。
Webpack 将~识别为projectRoot/node_modules

<强> app.scss

@import '~ionicons/dist/css/ionicons.css';
@import 'header';

或者更好地导入sass版本，以使其更加灵活。

<强> app.scss

$ionicons-font-path: '~/ionicons/dist/fonts'; //change path to ionicon font

@import '~ionicons/dist/scss/ionicons';
@import 'header';

<强> webpack.mix.js

 let mix = require('laravel-mix');
 mix.sass('resources/assets/css/sass/app.scss', 'public/dist');

如何在使用Laravel-Mix完全执行mix.copy后触发sass构建

1 个答案: