我正在尝试运行“npm run dev”，但它最终给了我一个错误。我正在使用 Laravel Mix 和 Tailwind CSS。
版本
资源/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
webpack.mix.js
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss("resources/css/app.css", "public/css", [
require('@tailwindcss/jit'),
])
./resources/css/app.css 中的错误模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：ModuleBuildError：模块构建失败（来自 ./node_modules/postcss-loader/ dist/cjs.js): TypeError: 无法在 /var/www/work 的 _default (/var/www/work/node_modules/tailwindcss/lib/lib/substituteScreenAtRules.js:16:5) 处读取未定义的属性“主题” /node_modules/@tailwindcss/jit/src/index.js:50:11 在 LazyResult.runOnRoot (/var/www/work/node_modules/postcss/lib/lazy-result.js:339:16) 在 LazyResult.runAsync ( /var/www/work/node_modules/postcss/lib/lazy-result.js:391:26) 在异步 Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:87: 14) 在 processResult (/var/www/work/node_modules/webpack/lib/NormalModule.js:701:19) 在 /var/www/work/node_modules/webpack/lib/NormalModule.js:807:5 在 /var /www/work/node_modules/loader-runner/lib/LoaderRunner.js:399:11 在 /var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:251:18 在 context.callback （/var /www/work/node_modules/loader-runner/lib/LoaderRunner.js:124:13) 在 Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:96:7) …
我在新项目中开始使用 Alpine.js v3 时遇到问题。这是我的 package.json 和 Alpine 设置：
"devDependencies": {
"laravel-mix": "^6.0.19"
},
"dependencies": {
"alpinejs": "^3.0.6"
}
import Alpine from 'alpinejs'
window.Alpine = Alpine
window.Alpine.start()
Alpine.data('demo', () => ({
open: false,
toggle() {
this.open = !this.open
}
}))
驱动此标记：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
<script src="assets/app.js"></script>
</head>
<body>
<div x-data="demo">
<button @click="toggle">Expand</button>
<div x-show="open">Content...</div>
</div>
</body>
</html>
我使用 laravel-mix 构建我的 javascript：
// webpack.mix.js
let mix = …我正在使用 Laravel 8 和 Bootstrap 5 制作一个博客应用程序。我使用放置在 Bootstrap 模式中的表单来添加帖子。此外，我还在项目中包含了一个 JavaScript 文件。
<script src="{{ asset('js/app.js') }}"></script>
在 中resources/js，我有一个 app.js 和一个 bootstrap.js 文件。在 app.js 中，我需要 bootstrap.js
require('./bootstrap')
我将webpack.mix.js所有这些编译到单个 JavaScript 文件中public\js\app.js：
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
我想将 popper.js 添加到项目中，如下所示：
require('./popper');
require('./bootstrap');
但是，为此目的，我需要 popper.jsresources/js以及其他两个文件。所以，我做了npm i @popperjs/core并且npm run dev。但它无法编译，并且我在上述 js 目录中没有得到 popper.js 。那么，我该如何解决这个问题呢？
我像往常一样运行了“npm run production”命令。\n但现在我不断收到此错误，并且无法解决它。\n我没有对资产（css、scss）进行任何更改，仅在控制器中进行了一些代码修改。 \n我已经搜索了堆栈上的线程，但没有一个解决方案适合我。
\nERROR in ./platform/core/base/resources/assets/sass/base/themes/blue.scss\nModule build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\n$color: var(--bs-body-bg) is not a color.\n \xe2\x95\xb7\n523 \xe2\x94\x82 $popover-title-bg: darken($popover-bg, 3%) !default;\n \xe2\x94\x82 ^^^^^^^^^^^^^^^^^^^^^^^\n \xe2\x95\xb5\n platform\\core\\base\\resources\\assets\\sass\\base\\bootstrap\\_variables.scss 523:20 @import\n platform\\core\\base\\resources\\assets\\sass\\base\\global\\_variables.scss 8:9 @import\n platform\\core\\base\\resources\\assets\\sass\\base\\_base.scss 2:9 @import\n platform\\core\\base\\resources\\assets\\sass\\base\\themes\\blue.scss 106:9 root stylesheet\n at processResult (E:\\xampp\\htdocs\\Laravel_app\\node_modules\\webpack\\lib\\NormalModule.js:764:19)\n at E:\\xampp\\htdocs\\Laravel_app\\node_modules\\webpack\\lib\\NormalModule.js:866:5\n at E:\\xampp\\htdocs\\Laravel_app\\node_modules\\loader-runner\\lib\\LoaderRunner.js:400:11\n at E:\\xampp\\htdocs\\Laravel_app\\node_modules\\loader-runner\\lib\\LoaderRunner.js:252:18\n at context.callback (E:\\xampp\\htdocs\\Laravel_app\\node_modules\\loader-runner\\lib\\LoaderRunner.js:124:13)\n at Object.loader (E:\\xampp\\htdocs\\Laravel_app\\node_modules\\sass-loader\\dist\\index.js:63:5)\n我是 Laravel 的新手，并且遵循 Laravel 5.4 的 Laracast 教程，
我阅读了 Laravel mix 以及我们如何使用 Webpack Laravel Mix 工具编译我们的资产。所以我尝试使用npm添加一个 JavaScript Package
1- Installed AlertifyJS。
2-在
3- 已执行中添加。资产被编译为，我可以在其中通过查找alertify关键字来查看alertifyjs代码。
我在resources\assets\js\app.js 中使用了如下所示的alertify代码：require('alertifyjs')resources\assets\js\bootstrap.jsnpm run devpublic\js\app.js
`$(document).ready(function(){
$('.run').on('click' , function(event){
alertify.alert("This is an alert dialog.", function(){
alertify.message('OK');
});
});
});`
查看文件：
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading text-center"><h2>THIS WILL BE THE HOME PAGE<h2></div>
<div class="panel-body …在生产时,我加载我的资产,例如:
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
并希望看到编译时:
<link href="https://example.com/css/app.083fd04ba374238b03b23e742c997718.css" rel="stylesheet">
但是我只是看到相对路径:
<link href="/css/app.083fd04ba374238b03b23e742c997718.css" rel="stylesheet">
webpack.mix.js:
mix
.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/print.scss', 'public/css')
.copy([
'node_modules/bootstrap-sass/assets/fonts/bootstrap',
'node_modules/font-awesome/fonts',
], 'public/fonts')
.sourceMaps();
if (mix.config.inProduction) {
mix
.version()
.disableNotifications();
} else {
//
}
最新版本的Laravel(5.4.21).使用nginx,在Ubuntu 16.04上强制使用https.不知道为什么路径不满,而是相对的.
编辑:如果我尝试使用mixvs asset,我也在本地看到相同的行为https.协议在这里似乎并不重要.
我正在学习 Laravel 并试图了解如何使用Laravel Mix来捆绑资产（scss 和 javascript）。
正如文档所说：
Laravel Mix 提供了一个流畅的 API，用于使用几种常见的 CSS 和 JavaScript 预处理器为 Laravel 应用程序定义 Webpack 构建步骤。
我认为Webpack会简单地将所有 javascript 文件连接成一个（并可选择缩小它），就像它处理.scss文件一样，这些文件被编译成 CSS 并合并到public/css/app.css。
正如这个答案所说：
Webpack 是一个命令行工具，用于创建资产包（代码和文件）。Webpack 不在服务器或浏览器上运行。Webpack 获取您所有的 javascript 文件和任何其他资产，然后将其转换为一个巨大的文件。
如果它实际上只是一个构建工具并且它的任何部分都没有在浏览器上运行，那么我不明白为什么它在我构建时将这个 javascript 添加到编译文件的顶部npm run dev（以及它究竟做了什么）：
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // …我正在使用Laravel v5.5构建一个多页应用程序，并使用Laravel Mix v1.6.2来编译我的资产。我正在为每个页面定义一个入口点。我正在将供应商模块提取到单独的供应商输出块中：
mix.js('resources/assets/js/page1.js', 'public/js')
.js('resources/assets/js/page2.js', 'public/js')
.extract('vue');
我还想实现的是拥有我编写的模块，这些模块在多个（2个或更多）页面/入口点之间共享，并自动提取到一个单独的块中（例如commons.js）。我可以这样：
mix.webpackConfig({
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
filename: "js/commons.js",
minChunks: 2
})
]
});
但这不能与mix.extract（）一起使用。我在这里看到了例子。但不确定如何在Laravel Mix中完成此操作。
理想情况下，输出应为：
js/
|- page1.js
|- page2.js
|- commons.js
|- vendor.js
我正在寻找一种在开发机器上使用Laravel Mix构建资产的方法，该方法随后将与生产中的参数匹配。
例如，我的API有一个基本URL，http://foo.test/api/v1用于本地开发和https://foo.com/api/v1生产服务器上。
因此，在我的客户代码（例如http.js）中，我想执行以下操作：
Vue.axios.defaults.baseURL = API_BASE_URL;
现在，API_BASE_URL应该会被替换成http://foo.test/api/v1我运行时npm run dev或https://foo.com/api/v1当我运行npm run prod。
我已经尝试了以下无效的方法。
webpack.mix.js
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.DefinePlugin({
API_BASE_URL: JSON.stringify('https://foo.com/api/v1'),
})
]
}
});
然后在http.js中
Vue.axios.defaults.baseURL = API_BASE_URL;
编译为：
Object({"NODE_ENV":"production"}).API_BASE_URL;
我也尝试过这种方法process.env.API_BASE_URL。
如何正确地在一个css文件中合并多个scss文件？
我当前的配置webpack.mix.js
mix.sass(
[
'resources/assets/sass/one.scss',
'resources/assets/sass/two.scss',
], 'public/css/style.css');
但这行不通。
我首先尝试首先mix.combined scss文件，然后mix.sass ...
但是在“ npm run watch”之后，我循环了疯狂的CLI。
laravel-mix ×10
laravel ×7
webpack ×5
javascript ×3
sass ×2
alpine.js ×1
css ×1
jit ×1
mixins ×1
node-modules ×1
npm ×1
popper.js ×1
scss-mixins ×1
tailwind-css ×1