标签: laravel-mix
如何使用 Laravel Mix 连接编译后的 SASS 和组合 CSS？
在我的 Laravel 项目中，我同时使用 SASS 和 CSS：SASS 用于依赖项（fontawesome、Bootstrap） - 通过 NPM 和跨深层文件夹结构 (BEM) 的纯 CSS。我想连接所有 CSS，编译 SASS 并将其全部连接到一个 .css 文件中。与 JS 相同：我的 BEM 结构中的纯 JS 文件需要与app.js需要由 Webpack 处理的单个文件合并。我试过这个：
mix.js('resources/assets/js/app.js')
.scripts('resources/assets/blocks/**/*.js')
.version('public/js/app.js');
mix.sass('resources/assets/sass/app.scss')
.styles('resources/assets/blocks/**/*.css')
.version('public/css/app.css');
但它不起作用 - 仅创建清单文件：
{
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css",
"/mix.js": "/mix.js"
}
推荐指数
解决办法
查看次数
Laravel-mix Webpack 公共路径
所以我使用 Laravel-Mix 并在 Webpack 中设置了代码分割。我正在为我的 Vue 组件使用动态导入，如下所示。
Vue.component('UserMenu', () => import('./components/UserMenu.vue'));
.babelrc由于我也在使用 Babel，因此我从项目根目录中的文件加载了语法动态导入插件。
这一切都工作正常，并且 Webpack 在构建时正确地分割了代码。然而，问题是，它将块放在公共根中而不是放在public/js
如果在我的 webpack.mix.js 中我这样做......
mix.js('resources/assets/js/app.js', 'public/js');
...然后混合将构建的文件正确地放置在/js目录中。
但是为了对文件进行分块，如果在 webpack.mix.js 中我会...
mix.webpackConfig({
entry: {
app: './resources/assets/js/app.js',
},
output: {
filename: '[name].js',
publicPath: 'public/js',
}
});
...无论我分配给 publicPath 属性什么，所有块都会放入公共根中。
知道我在这里缺少什么吗？
推荐指数
解决办法
查看次数
我应该提交 laravel mix 生成的 css 和 js 吗？
我开始使用 laravel mix，它生成了巨大的文件。我应该将它们提交到仓库吗？两种方式各有什么优缺点？
推荐指数
解决办法
查看次数
我在 Laravel Mix 中使用 React 路由器刷新浏览器时收到错误 404
我知道有几个帖子有类似的问题，但不同的方法似乎无法理解。我想了解更多并能够使用 React.js 和 Laravel 开发多个应用程序。
Header.js：导入文件
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Link,
Switch,
Route
} from 'react-router-dom';
import Home from './Home';
import About from './About';
import Dashboard from '../admins/Dashboard';
import Contact from './Contact';
路由器（BrowserRouter）
<Router>
<div>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<Link className="nav-link" to="/" exact
>Home</Link>
</li>
<li className="nav-item">
<Link …推荐指数
解决办法
查看次数
Laravel Mix：为 IE11 兼容性配置 Babel（转换和 polyfill）
在带有 Laravel-Mix 4 的 Laravel 6 应用程序中，并使用 Vue 预设，我需要编译我的 JavaScript 代码以兼容 IE11。这意味着为缺失的函数添加任何 polyfill，编译出箭头函数，等等。开箱即用，这还没有完成。
我的测试代码resources/js/app.js：
//require('./bootstrap');
let test = [1, 2, [3, 4]];
console.log(
test.flat().map((x) => 2*x)
);
使用默认配置，laravel mix 似乎不会编译 JavaScript 代码，而只会进行一些格式化。注释保留在编译输出中。
结果npm run dev是：
Asset Size Chunks Chunk Names
/css/app.css 0 bytes /js/app [emitted] /js/app
/js/app.js 4.95 KiB /js/app [emitted] /js/app
如何让 Laravel-Mix 使用 Babel 创建兼容 IE11 的源代码？
推荐指数
解决办法
查看次数
将项目放在子文件夹中时，laravel mix 重写 url 路径错误
我已经在服务器上部署了 Laravel React 应用程序，位于一个名为患者/的文件夹内，因此该应用程序的完整 URL 是domain.com/患者
找不到 app.js 和 app.css 文件，我面临 404 错误，因为它试图从domain.com/而不是domain.com/病人/app.css和domain.com/病人/app提供文件.js 如果我将 mix 更改为 asset 或将 mix 放入 app.blade.php 中的 asset 中，则找不到所有其他 asset，如 0.js、0.css，
以下是app.blade.php中的代码
<!DOCTYPE html>
<html class="h-full bg-gray-200">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}" defer></script>
<title>Clinical Laboratory | Provider Portal</title>
@routes
</head>
<body class="font-sans leading-none text-gray-800 antialiased">
@inertia
</body>
</html>
以下是我的 webpack.mix.js
const cssImport = require('postcss-import');
const cssNesting = require('postcss-nesting');
const mix = require('laravel-mix');
const …推荐指数
解决办法
查看次数
使用 Laravel Mix 编译时出错 - Vue
我一直在使用 Laravel 8 和 Vue Js，它们配合得很好。我尝试再次使用 Laravel 和 Vue Js 启动一个项目，但一周后它给了我一个错误。我使用了以下命令：
Laravel v8.26.1 (PHP v7.4.3)
composer create-project --prefer-dist laravel/laravel <project_name>
之后就可以正常工作了：
npm install
效果也很好
但是当我尝试运行时出现错误npm run dev
composer create-project --prefer-dist laravel/laravel <project_name>
包.json
npm install
我没有做任何特别的事情或配置任何东西！
先谢谢了
推荐指数
解决办法
查看次数
Laravel-Mix字体路径问题
我正在尝试使用与Laravel从themeforest购买的主题
我已经习惯mix.copy将字体从移动node_modules到我的public目录，这可以正常工作。
但是，当我在webpack.mix文件中包含以下几行时，
mix.less('node_modules/elite-theme/eliteadmin-dark/less/style.less', 'public/css', './');
我收到以下错误
知道我在这里做错了吗？
推荐指数
解决办法
查看次数
Laravel-mix没有构建通知
我正在使用Vue.js和Laravel-Mix，当我保存项目时，我没有收到这样的通知：
我在跑步npm run watch。编译时，我的控制台不显示任何错误/警告。
我已经检查了webpack.mix.js，mix.disableSuccessNotifications();
文件中没有该通知，我的通知正在我的操作系统上运行。我正在使用Linux Mint。
我有这个package.json：
"watch": "node_modules/.bin/webpack --watch --watch-poll --config=node_modules/laravel-mix/setup/webpack.config.js",
- npm：3.10.10
- 节点：6.14.1
我有一个具有相同项目的朋友，他得到通知“ Build Success”
推荐指数
解决办法
查看次数
$未定义-找不到Laravel Jquery？
在我的Laravel项目（laravel 5.6）中，我从npm安装了Jquery。然后我将其添加到webpack.mix.js。
mix.webpackConfig(webpack => {
return { plugins: [new webpack.ProvidePlugin({
$: "jquery",
jQuery: ["jquery", "$"],
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})] };
});
编译资产并尝试使用jquery后，它显示
"Uncaught ReferenceError: $ is not defined"
在视图中加载混合文件后，我正在使用自定义JavaScript文件。
<script src="{{ mix('/js/app.js') }}"></script>
<script type="text/javascript" src="/js/tests/tests.js"></script>
在我的自定义JavaScript文件中，我添加了以下代码来检查Jquery。
$("#myCheckButton").click(function(e) {
console.log(test);
});
我尝试更改webpack.min.js webPackconfig设置，但无法解决。像这样的大多数问题建议将自定义js文件放在混合后。我认为我的情况是对的
编辑：还有另一个错误
jquery-jvectormap.min.js?37ce:1 Uncaught TypeError: Cannot read property 'fn' of undefined
at eval (jquery-jvectormap.min.js?37ce:1)
at Object.eval (jquery-jvectormap.min.js?37ce:1)
at eval (jquery-jvectormap.min.js:6)
at Object../node_modules/jvectormap/jquery-jvectormap.min.js (app.js?id=3e76ba2082961d8bb73a:654)
at __webpack_require__ (app.js?id=3e76ba2082961d8bb73a:20)
at eval (index.js:3)
at Object../resources/assets/js/vectorMaps/index.js (app.js?id=3e76ba2082961d8bb73a:1820)
at __webpack_require__ (app.js?id=3e76ba2082961d8bb73a:20)
at …推荐指数
解决办法
查看次数