> For the complete documentation index, see [llms.txt](https://learnphp.gitbook.io/learnphp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnphp.gitbook.io/learnphp/laravel-advanced/laravel-mix-with-public-folder-outside-the-project-folder-ok.md).
# Laravel Mix with public folder outside the project folder (ok)
### File for laravel mix 8 C:\xampp713\htdocs\phongkhamcom\package.json
```json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@popperjs/core": "^2.10.2",
"axios": "^0.21",
"bootstrap": "^5.1.3",
"bootstrap-sass": "^3.4.3",
"cross-env": "^7.0.3",
"jquery": "^3.7.0",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^5.0.0",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vue": "^3.3.4"
}
}
```
> Chú ý: Chúng ta có thể tạo ra từng file riêng biệt hoặc gộp chung
#### **Riêng biệt**
```php
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.setPublicPath('../../themes/twentyseventeen');
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/script.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/style.scss', 'public/css')
.sourceMaps();
```
#### **Gộp chung file**
```php
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.setPublicPath('../../themes/twentyseventeen');
mix.js(['resources/js/app.js','resources/js/script.js'], 'public/js')
.sass(['resources/sass/app.scss','resources/sass/style.scss'], 'public/css')
.sourceMaps();
```
### 👏 Hoặc cao cấp hơn 1
```php
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.setPublicPath('../../themes/twentyseventeen');
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/script.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/style.scss', 'public/css')
.styles([
'../../themes/twentyseventeen/public/css/app.css',
'../../themes/twentyseventeen/public/css/style.css',
], '../../themes/twentyseventeen/public/css/all.css');
```
### 👏 Hoặc cao cấp hơn 2
```php
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.setPublicPath('../../themes/twentyseventeen');
mix.js(['resources/js/app.js','resources/js/script.js'], 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/style.scss', 'public/css')
.styles([
'../../themes/twentyseventeen/public/css/app.css',
'../../themes/twentyseventeen/public/css/style.css',
], '../../themes/twentyseventeen/public/css/all.css');
```
### 👏 Hoặc cao cấp hơn 3
```php
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.setPublicPath('../../themes/twentyseventeen');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/style.scss', 'public/css')
.styles([
'../../themes/twentyseventeen/public/css/app.css',
'../../themes/twentyseventeen/public/css/style.css',
], '../../themes/twentyseventeen/public/css/all.css');
```
C:\xampp\htdocs\wayarmy\wp-content\plugins\wl-bootstrap\resources\js\app.js
```javascript
require('./script');
```
C:\xampp\htdocs\wayarmy\wp-content\plugins\wl-bootstrap\resources\js\script.js
```javascript
alert("aaaaaaaaaa3");
```
C:\xampp\htdocs\wayarmy\wp-content\plugins\wl-bootstrap\webpack.mix.js
```javascript
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.setPublicPath('../../themes/twentyseventeen');
mix.js('resources/js/app.js', 'assets/js')
.sass('resources/sass/app.scss', 'assets/css')
.sourceMaps();
```