您可以使用 Laravel Mix 编译 CSS 和 JavaScript 预处理器。因此,您会将所有资产存储到资源/资产文件夹中。
Laravel Mix 提供了一个流畅的 API,用于使用几种常见的 CSS 和 JavaScript 预处理器为您的应用程序定义 webpack 构建步骤。
要使用 laravel mix,你必须先安装 node 和 npm。
然后分别在 resources/app/sass 目录和 resources/sass 中创建文件 app.js 和 app.scss。
然后打开项目根目录下的 webpack.mix.js 文件,在 webpack.mix.js 文件中写入以下代码
在 webpack.mix.js 文件中(你可以在你的项目根目录看到这个文件)
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
现在让我们看看上面两行是什么意思?
mix.js('resources/assets/js/app.js', 'public/js') 表示要读取app.js 的内容(存储在resources/js 目录中),将它们混合后拉到public/js 中。
mix.sass 也是如此。由于它使用 SAAS 兼容,因此您可以使用基于 CSS 或 SAAS 的语法来定义您的布局。无论如何,Webpack 将它们编译为单个 CSS。现在在 master.blade.php 中,您只需分别调用这两个 JS 和 CSS 资源:
<script src="{!! asset('js/app.js') !!}"></script>
和
<link rel="stylesheet" href="{!! asset('css/app.css') !!}">
现在运行npm run dev 命令。
它将编译您的 CSS 和 JS 文件并将构建文件放在公共文件夹中。
详细说明可以查看
https://laravel.com/docs/5.7/mix
https://appdividend.com/2018/02/19/laravel-mix-compiling-assets-tutorial/