标签: laravel-mix
使用 Laravel Mix 从 Stylus 中的 node_modules 导入
我有一个大型 Stylus 项目，需要从 vanilla Gulp 移植到 Laravel Mix 中。
其中app.styl包括另一个来自node_modules 的framework.styl内容@import。我无法在 Laravel Mix 中使用use和import标志（或者至少我不知道如何使用），因为
- 对于某些依赖项，我只需要导入 node_modules 文件夹中的特定文件，而不是整个文件
- 对于一个依赖项，我需要在导入 Stylus之前在其内部设置一长串变量。
主样式
@import "includes/framework.styl"
/* Other stuff */
包括/framework.styl
$variable = 1.5
$other = white
/* bunch more */
@import "jeet"
@import "foo/src/specific.styl"
ks-no-conflict = true
@import "kouto-swiss"
/* other stuff */
@import中的所有s 都framework.styl来自node_modules。这些依赖项和文件的加载顺序很重要，因为如果加载顺序错误，它们可能会相互冲突。
但是，当我运行时npm run dev，它抱怨无法在 中找到任何依赖项位置framework.styl。
我尝试@import在路径前加上~/, node_modules/ …
推荐指数
解决办法
查看次数
使用 laravel mix 包含 js 依赖项
我无法真正让我的 js 库工作，前段时间我决定为我使用的每个库都有一个单独的 js 文件（所以我的布局中包含一个 jquery.js 文件和一个 bootstrap.js 文件），一切工作得很好，直到我不得不将 jquery-ui 添加到这种混乱中，并收到此错误
Uncaught TypeError: $(...).slider is not a function
直到我在同一个文件中加载 jquery 和 jquery-ui 。问题是我不想在包含 jquery 的所有地方都包含 jquery ui ，因为我只在 2 个页面中使用它。下面我将放置我的代码：
jquery-ui.slider.js：
require('jquery-ui/ui/widgets/slider');
require('./components/carFilter.js');
应用程序.js：
window.$ = window.jQuery = require('jquery');
require('./bootstrap');
webpack.mix.js：
mix.js('resources/assets/js/app.js', 'public/js')
mix.js('resources/assets/js/jquery-ui.slider.js', 'public/js');
我正在使用以下 npm 模块：
- 引导程序-sass
- jQuery
- jquery-ui
推荐指数
解决办法
查看次数
Laravel Mix：将 Sass 编译为 .css 和 min.css
我已经把头撞到墙上了。
对于我的项目，我希望 Laravel Mix/webpack 将一个.scss文件编译成两个文件，一个常规的、未缩小的（扩展或嵌套）.css文件和一个缩小的（压缩）.min.css文件，所以我基本上拥有这两个文件。
我尝试过：
mix.sass('src', 'output')
.copy('output.css', 'output.min.css')
.minify('output.min.css');
但是，这会导致错误，因为该.css文件未编译。
我知道 Laravel Mix 在运行时会缩小npm run production，但我对两个文件感兴趣，而不仅仅是production编译的文件。
有什么办法可以做到这一点，而不修改整个 webpack 配置吗？
推荐指数
解决办法
查看次数
Laravel 混合版本控制不会删除旧的构建文件
我正在使用 Laravel 5.4 和 mix 来版本化我的 javascript 和 scss 文件。问题是：它不会清除以前构建的文件，只是添加一个具有不同文件名的新文件，即app.9d3e179e85922aad6ccf.js
在我开始的一个新项目中，我没有这个问题。Mix 正确地用最新构建的版本替换旧文件。
有什么地方我可以做出改变吗？
推荐指数
解决办法
查看次数
laravel-mix 生成空（0 字节）.css 文件，没有动态导入和 .extract
当我运行时，我在不使用 .extract 和 import() 的情况下获得了空的 .css 文件 npm run dev
我的 webpack.mix.js：
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js').sourceMaps()
.js('resources/assets/js/admin.js', 'public/js').sourceMaps()
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/admin.scss', 'public/css');
mix.copyDirectory('resources/assets/img', 'public/img');
奇怪的是，如果我删除 .js 混合文件之一，它会起作用。例如这有效：
mix.js('resources/assets/js/app.js', 'public/js').sourceMaps()
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/admin.scss', 'public/css');
这也有效：
mix.js('resources/assets/js/admin.js', 'public/js').sourceMaps()
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/admin.scss', 'public/css');
但在那之后我需要生成 admin.js（或 app.js）。这不是很方便。任何想法我做错了什么？
我的环境是：
- Laravel 混合版本：5.0.0
- 节点版本：11.0.0
- NPM 版本：6.10.3
- 操作系统：macOS High Siera / Ubuntu 18.04 LTS
我确定我没有动态导入，因为我是从 laravel-mix v.3 升级的。但我也检查了我的代码。如果我有动态导入，我的示例都不会起作用。
编辑：我发现问题出在我导入的 admin.js 文件中：
import router from './router'
在 /router/index.js 中有另一个导入：
import routes from './routes.js'
问题 se?ms 在 routes.js …
推荐指数
解决办法
查看次数
Laravel Mix 和 Turbolinks
我在 turbolinks 设置方面遇到了一些问题。这是设置：Laravel Mix - 默认值：bootstrap，jquery，..）。就在 bootstrap.js 文件之后，我包含了 turbolinks。一切正常，直到页面重新加载 - 我总是出错。我究竟做错了什么？
错误：
app.js:1282 Uncaught TypeError: $ is not a function
at HTMLDocument.<anonymous> (app.js:1282)
at Object.push../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (vendor.js:105933)
at r.notifyApplicationAfterPageLoad (vendor.js:105934)
at r.visitCompleted (vendor.js:105934)
at r.complete (vendor.js:105933)
at r.<anonymous> (vendor.js:105933)
at vendor.js:105933
有错误的行：
document.addEventListener('turbolinks:load',function() {
new SimpleBar(document.getElementsByClassName("js-simplebar")[0]);
$(".sidebar-toggle").on("click", function() {
//...
});
});
编辑这里是 js 包括（编译 - Laravel Mix）
<head>
<script defer src="/js/manifest.js" data-turbolinks-track="true"></script>
<scrip`enter code here`t defer src="/js/vendor.js" data-turbolinks-track="true"></script>
<script defer src="/js/app.js" data-turbolinks-track="true"></script>
</head>
这是我的 app.js：
require('./bootstrap');
let Turbolinks = require('turbolinks'); …推荐指数
解决办法
查看次数
如何在 Laravel Mix 中使用 FullCalendar
我已经使用 npm 安装了 Fullcalendar 库包。
npm i --save @fullcalendar/core
@fullcalendar/interaction @fullcalendar/daygrid
@fullcalendar/timegrid @fullcalendar/list @fullcalendar/bootstrap
我也将它包含在 app.js 中。
require('@fullcalendar/core');
require('@fullcalendar/bootstrap');
require('@fullcalendar/list');
require('@fullcalendar/timegrid');
require('@fullcalendar/daygrid');
require('@fullcalendar/interaction');
但是，当尝试使用以下代码创建日历时：
var calendarEl = document.getElementById('calendar');
calendar = new Calendar(calendarEl, {
plugins: [ 'interactionPlugin', 'bootstrapPlugin', 'dayGridPlugin', 'timeGridPlugin', 'listPlugin'],
});
我收到错误...
Uncaught ReferenceError: Calendar is not defined at HTMLDocument.<anonymous>在new Calendar
.
我究竟做错了什么？
我的 webpack.mix.js 看起来像这样：
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').version();
编辑：
将我的 app.js 设置为：
window.FullCalendar = require('@fullcalendar/core');
window.bootstrapPlugin = require('@fullcalendar/bootstrap');
window.interactionPlugin = require('@fullcalendar/interaction');
window.listPlugin …推荐指数
解决办法
查看次数
如何在 vue.js 欢迎组件中使用 bootstrap 而不是 tailwind CSS
我将 jetstream+inertia.js 安装到我的 Laravel 项目中，一切正常，但我只需要在welcome. vue组件中使用 bootstrap 5，那么我该如何处理呢？
我的app.js档案；
require('./bootstrap');
// Import modules...
import {createApp, h} from 'vue';
import {App as InertiaApp, plugin as InertiaPlugin} from '@inertiajs/inertia-vue3';
import 'animate.css';
import Toaster from '@meforma/vue-toaster';
import 'alpinejs';
const el = document.getElementById('app');
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({methods: {route}})
.use(InertiaPlugin)
.use(Toaster)
.mount(el);
我的app.css文件：
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
推荐指数
解决办法
查看次数
找不到模块：错误：无法解析“计时器”
我正在尝试将此包https://github.com/shwilliam/vue-scrollin安装到我的 laravel + vue 项目中。用laravel mix编译后，出现以下错误：
找不到模块：错误：无法解析“\node_modules\vue-scrollin\dist”中的“计时器”
重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "timers": require.resolve("timers-browserify") }' - 安装 'timers-browserify' 如果你不这样做想要包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "timers": false }
我按照给定的说明进行操作，但它给了我同样的错误。
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/css/app.scss', 'public/css/app.css')
.postCss('resources/css/app.css', 'public/css', [
//
])
.webpackConfig(require('./webpack.config'));
webpack.config.js
module.exports = {
resolve: {
fallback: { "timers": require.resolve("timers") }
},
};
包.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000", …推荐指数
解决办法
查看次数
Laravel Mix：ValidationError：CSS Loader 已使用与 API 架构不匹配的选项对象进行初始化
我最近尝试运行npm run dev和npm run watch，但在编译 80% 后出现错误。我尝试使用谷歌搜索它，但没有找到解决方案。下面是我在控制台中得到的错误。
./resources/sass/frontend/app.scss 中的错误模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：ModuleBuildError：模块构建失败（来自 ./node_modules/css- loader/dist/cjs.js): ValidationError: 无效的选项对象。CSS Loader 已使用与 AP I 架构不匹配的选项对象进行初始化。
- options.url 应该是以下之一：boolean | 对象{过滤器？} -> 允许启用/禁用
url()/image-set()功能处理。-> 在https://github.com/webpack-contrib/css-loader#url阅读更多 详情：
- options.url 应该是一个布尔值。
- options.url 应该是一个对象： object { filter? 在验证 (E:\Web Projects\project\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11) 在 Object.getOptions (E:\Web Projects\project\node_modules\webpack\lib \NormalModule.js:527:19) 在 Object.loader (E:\Web Projects\project\node_modules\css-loader\dist\index.js:31:27) 在 processResult (E:\Web Projects\project\node_modules \webpack\lib\NormalModule.js:701:19) 在 E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:807:5 在 E:\Web Projects\project\node_modules\loader-runner\ lib\LoaderRunner.js:399:11 在 E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:251:18
webpack.mix.js
const mix = require('laravel-mix');
mix.setPublicPath('public')
.setResourceRoot('../')
.vue()
.sass('resources/sass/frontend/app.scss', …推荐指数
解决办法
查看次数
标签 统计
laravel-mix ×10
webpack ×7
laravel ×6
javascript ×4
bootstrap-4 ×1
fullcalendar ×1
inertiajs ×1
jquery ×1
jquery-ui ×1
laravel-5.4 ×1
node.js ×1
npm ×1
polyfills ×1
sass ×1
stylus ×1
turbolinks ×1
vue.js ×1