Lou*_*lez 5 laravel laravel-blade vite laravel-vite
所以之前，用laravel MIX，在webpack.mix.js文件中，你可以这样写
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/header.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/main.scss', 'public/css')
.sass('resources/sass/header.scss', 'public/css')
并将其public/asset单独编译。就像 JS 文件将被编译为public/asset/jssass 文件一样public/asset/css。当您将文件放入head视图blaze.php中时，您只需编写
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<link rel="stylesheet" href="{{ asset('css/header.css') }}">
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/header.js') }}"></script>
我如何将其与现在的 Laravel-Vite 结合起来？因为当我运行npm run dev单独的文件scss并js在一个文件夹中一起编译时，该文件夹是public/build/assets/. 他们没有区分js文件是否进入js文件夹和scss文件是否进入css文件夹。
这是我的样子vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/sass/main.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});
在 laravel 9 中使用 scss 和 Vite
步骤 1:- 在 resources/sass 目录中创建 app.scss 文件
资源/sass/app.scss
// Variables
// @import 'variables';
/* The following line can be included in a src/App.scss */
@import "bootstrap/scss/bootstrap";
vite.config.js步骤 2:- 然后对文件进行更改
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({
// input: 'resources/js/app.jsx',
input: [
"resources/sass/app.scss", // scss file
"resources/js/app.jsx"
],
refresh: true,
}),
react(),
],
});
第 3 步：- 在 Laravel Blade 文件中进行更改。就我而言，`resources/views/app.blade.php
资源/视图/app.blade.php
<head>
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Scripts -->
// @vite(['resources/scss/app.scss', 'resources/js/app.jsx'])
@vite(['resources/sass/app.scss', 'resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
</head>
...
完毕。
现在根据您的问题，我了解您需要将构建资产保存为自定义路径，然后查看官方文档
根据文档，我们需要buildDirectory在 vite.config.js 文件中设置关键选项
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({
// input: 'resources/js/app.jsx',
input: [
"resources/sass/app.scss", // scss file
"resources/js/app.jsx"
],
buildDirectory: 'bundle', // Customize the build directory...
refresh: true,
}),
react(),
],
});
& laravel Blade 文件将如下所示
<head>
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Scripts -->
{{Vite::useBuildDirectory('bundle')->withEntryPoints(['resources/sass/app.scss', 'resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"]); }}
</head>
...
注意：-我们需要安装npm add --save-dev sass，否则我们会出错Preprocessor dependency "sass" not found. Did you install it?
| 归档时间： |
|
| 查看次数： |
2110 次 |
| 最近记录： |