Laravel mix会重新编译所有资源，即使只进行了css更改
Laravel Mix是Laravel框架中的一个前端构建工具，用于编译和打包前端资源。它基于Webpack，并提供了一种简化的配置方式，使开发人员可以轻松地处理前端资源的编译和优化。
对于Laravel Mix重新编译所有资源的问题，是因为Laravel Mix默认会监视项目中的所有资源文件的变化，并在文件发生更改时重新编译这些资源。这包括CSS、JavaScript、图片等各种资源文件。
尽管只进行了CSS更改，但Laravel Mix会重新编译所有资源的原因是为了确保资源之间的依赖关系得到正确处理。在前端开发中，不同的资源文件之间可能存在相互依赖的关系，例如CSS文件中引用了某个JavaScript文件或者图片文件。如果只编译CSS文件而不重新编译其他资源，可能会导致依赖关系出现问题，从而影响网页的正确显示和功能。
虽然重新编译所有资源可能会增加一些开发时间，但这样做可以确保项目的稳定性和一致性。同时，Laravel Mix提供了一些优化功能，例如自动添加浏览器前缀、压缩代码等，可以提升前端资源的性能和加载速度。
对于Laravel Mix的具体使用方法和配置，请参考腾讯云的相关产品文档：Laravel Mix。
相关·内容
我正在尝试找出这方面的最佳实践，我使用下面的代码行将引导程序加载到我的app.js中 import 'bootstrap/dist/css/bootstrap.css'; 问题是我的app.js在页面的底部，而我放置的app.css，从sass生成，在页眉，所以bootstrap接管了我写给over的所有样式。 在我的laravel布局模板的头部： <link href="{{ asset('css/app.css?v=1.5') }}" rel="stylesheet"> 在页脚： <script src=&
浏览 11提问于2019-01-08得票数 0
回答已采纳
我有以下内容(webpack.mix.js)
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
运行npm dev后，将在js目录中编译css和js文件，而不会创建css目录。
应该是：/public/js/app.js和/public/css/app.css
但最终却是：/public/js/app.js和/public/js/app.css
即使我只尝试在(webpack.mix.
浏览 3提问于2022-03-07得票数 0
我在一个码头集装箱中安装了Laravel，并使用Laravel启动了它。我使用Laravel与顺风版本3，以包括我的CSS。问题是我希望将整个Tailwind编译到我的resources/css/app.css文件中。
tailwind.config.js
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend
浏览 17提问于2021-12-12得票数 0
如何使用laravel mix在laravel页面中编译多页应用程序中的css和jss。假设我有页面1，页面2，page1有test10.js，test11.js，test12.js和test10.css，test11.css，test12.css和page2有test21.js，test22.js，test23.js和test21.css，test22.css，test23.css等等。所以有人告诉我如何在多页应用程序中编译css和jss。
浏览 22提问于2018-05-07得票数 -2
我有一个关于Laravel5.4的项目，我对前端软件包经理来说绝对是新手。
我使用npm在我的项目中安装了4个软件包，所以我的node_modules文件夹大约有210 MB。
我使用Laravel将所需的依赖项和文件组合成组，然后运行npm run dev。我的webpack.mix.js看起来像：
let mix = require('laravel-mix');
mix
.copy('node_modules/jquery/dist/jquery.js', 'public/js')
.combine([
'n
浏览 2提问于2017-12-13得票数 3
回答已采纳
我是Laravel的新手，我第一次安装了laravel mix。node.js和一切都安装好了，但是当我想改变背景颜色时，对我的页面没有任何影响。以下是我的代码： webpack.mix.js： const mix = require('laravel-mix');
mix.disableNotifications();
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------
浏览 59提问于2021-07-24得票数 0
回答已采纳
在使用Laravel -Mix4的Larave6应用程序中，使用Vue预设，我需要编译我的JavaScript代码以兼容IE11。这意味着为缺失的函数添加任何多边形填充，编译出箭头函数，等等。开箱即用，这还没有完成。
我用resources/js/app.js编写的测试代码
//require('./bootstrap');
let test = [1, 2, [3, 4]];
console.log(
test.flat().map((x) => 2*x)
);
在默认配置下，laravel mix似乎不会编译JavaScript代码，而只是进行一些格式化。注释
浏览 2提问于2019-11-02得票数 4
回答已采纳
1回答
刚刚开始使用Laravel混合。现在，我已经将所有需要的主css捆绑到一个名为test.css的文件中，并且它正在加载。
现在，还有两个样式表，即a.css和b.css。我想要做的是，只有在用户通过身份验证的情况下，才能将其合并到由mix生成的test.css中。
现在，在简单的刀片中，我们将添加
@auth // Load css here @endauth
但是，如何使用mix来实现这一点，在任何地方都没有找到一条相同的信息。
谢谢
浏览 0提问于2018-08-31得票数 1
回答已采纳
3回答
Laravel无效
、、、
我正在尝试Laravel，并希望在includePaths中包括引导程序，但是它不起作用。我哪里出问题了？
var paths = {
'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}
elixir(function(mix) {
mix.sass("style.scss", 'public/assets/css/', {includePaths: [paths.bootstrap + 'styleshee
浏览 4提问于2015-02-10得票数 3
回答已采纳
3回答
我尝试在Laravel 8中使用twitter bootstrap，但在手动操作之后，bootstrap JS(?)不工作。CSS已加载，样式可用，但下拉菜单等不起作用。当我点击下拉菜单项时，没有任何反应。
我做到了：
composer require laravel/ui
php artisan ui bootstrap
npm install
npm run watch / dev
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src=
浏览 1提问于2021-02-17得票数 0
我开始学习VUEJS和Hot Module Replacement (or HMR)，我完成了Laravelv5.8的干净安装，按照Laravel文档中的说明-- --一切看起来都很简单，但是当运行npm run hot时，浏览器控制台中会显示错误。
显然它是功能性的，但我不确定这是否是预期的行为，或者实际上是一个错误，需要进行一些调整或参数化。
但有趣的是，如果我运行npm run dev，就不会显示错误。
版本
# php artisan --version
Laravel Framework 5.8.37
# npm -v
6.13.4
# node -v
v12.16.1
#
浏览 2提问于2020-02-25得票数 1
我使用 --这是轻松使用webpack的一种灵活方式。
当运行watch时，每当文件更改时，它将重新编译dev模式。但是，为了使用这些方法，有一个外部构建步骤--例如，一个项目需要调用drush cc css-js。
是否有办法从webpack.mix.js文件或其他文件中执行此操作？
有点像：
mix()
.js('src/app.js', 'dist/')
.vue()
.shell('drush cc css-js') // ««« something like this?
;
或者它必须进入package.json的.scripts
浏览 2提问于2020-11-14得票数 2
回答已采纳
我希望在Laravel5.8项目中使用VUE.JS中的别名来导入模块中的css和js。
webpack.mix.js
mix.webpackConfig({
resolve: {
alias: {
'alias': path.resolve(
__dirname,
'~myModule/src'
)
}
}
});
在我的VUE App.js中，我想导入css文件夹，我写道：
资源/js/app.js
// css files
import 'ali
浏览 0提问于2019-04-25得票数 1
1回答
你好，我有一个新鲜的龙舌兰和鞋带。到目前为止我只有一个导航条。当我加载页面以查看它时，我注意到加载了app.js文件，但没有呈现app.css，因为app.css样式表是完全空的。app.css和app.js都位于正确引用的目录中。如果我使用引导5cdn，一切正常。在我的另一个项目(也是一个新的安装)中，CSS工作得很好。我还没有修改这个新的安装.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
浏览 5提问于2021-09-05得票数 0
2回答
Laravel混合转译依赖
、、、、
我正在尝试在一个laravel mix项目中使用库(使用typescript)。但我一直收到错误Uncaught TypeError: Class constructor VuexModule cannot be invoked without 'new'。这似乎是一个，可以通过将transpileDependencies: ['vuex-module-decorators']添加到我的vue.config.js文件中来解决，这将告诉babel转译该包。
因为我使用的是laravel mix，所以添加一个vue.config.js文件不会做任何事情。我不知道如何
浏览 2提问于2018-11-17得票数 2
我在resources/assets/less文件夹style.less和admin/style.less中有这两个文件。我想把这个文件编译成不同的路径，如下所示：
编译为public/css/的style.less
另一个编译为public/admin/styles/
这就是我在gulpfile.js中所做的
elixir(function(mix) {
mix.less('style.less', 'public/css/');
mix.less('admin/style.less', 'public/admin/st
浏览 1提问于2015-03-29得票数 7
我和Laravel Elixir .version('xxxxxx.js')有问题。由于某些原因，我似乎不能将.version用于js文件或.css之外，甚至不能拥有多个版本化的js文件。
elixir(function(mix) {
/**
* My Less
*/
mix.less('app.less').version('public/css/app.css');
/**
* Vendor Scripts
*/
mix.scripts([
浏览 1提问于2015-02-09得票数 5
2回答
首先，我已经做了我的搜索之前，张贴这个问题，我发现的答案不适用于我。
我做了答案的步骤，
所以，我有我的mix.js配置
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
我运行了npm install --save @fortawesome/fontawesome-free并尝试了npm install @fortawesome/fontawesome-free --save-dev
我在pa
浏览 0提问于2019-02-23得票数 2
回答已采纳
我有一个Laravel 8应用程序运行在Jetstream上惯性Js和VueJs 3。
当我运行: npm运行驱动
我收到这个错误：
Exception
Unable to locate Mix file: /css/app.css. (View: /var/www/html/mysite/resources/views/app.blade.php)
http://subdomain.mysite.com/
改变后：
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
至
&
浏览 8提问于2021-05-25得票数 0
1回答
可能是个老问题，但，我在之前从未尝试过，也没有找到解决方案(我找到的只是scss文件的样本)。
我使用JavaScript脚手架作为我的前端，所以我在布局资产中的全部内容如下：
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<scrip
浏览 2提问于2018-08-27得票数 1
回答已采纳
2回答
我的小束大小是246 is。我正在查看是否可以变得更小，并且我读到使用mix.extract(['vue', 'jquery']);提取vue和jquery可以帮助实现这一点。我把它添加到webpack.mix.js`中，现在它创建了两个文件而不是一个。它创建了: 1 ) app.js，161 is，2) vendor.js，180 is。如果两者都需要包含在页面中，这有什么好处呢？
浏览 0提问于2019-04-07得票数 1
因此，我从Laravel 5、Elixir和Bower开始，并遵循了在上发布的指南。
我成功地编译了所有的脚本，但是Gulp不会编译Bootstrap文件，即使它写的是Finished 'sass' after 228 ms。这就是我的自动取款机里的东西：
var paths = {
'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}
elixir(function(mix) {
mix.sass("style.scss&#
浏览 6提问于2015-02-04得票数 3
回答已采纳
我是Laravel的新手，我正在尝试使用Laravel Mix编译和上传我的资源。
mix.js('resources/js/app.js','public/js')
.js('resources/js/users.js','public/js')
.sass('resources/sass/app.scss', 'public/css')
.css('resources/css/myStyle.css','public/css/myStyle.css
浏览 14提问于2021-06-08得票数 0
我在制造的拉拉维尔有个项目。在scss文件中，我做了一些更改(字体大小和颜色)，但是我不知道css文件是如何生成的。因为我看不到css文件中的变化。在Laravel文档中，我看到css是以这种方式生成的：mix.sass('resources/sass/app.scss', 'public/css');，但我不知道如何运行这个命令。
浏览 0提问于2019-12-29得票数 0
回答已采纳
1回答
我刚刚用Jetstream初学者工具包安装了一个干净的Laravel项目，所以它也安装了Tailwind CSS。 然后我尝试使用Tailwind中的示例代码，但它不会显示出来。 这是我从Tailwind文档中获得的简单测试代码：(来自https://tailwindcss.com/docs/hover-focus-and-other-states) app.blade.php：(您可以运行代码片段，因为这实际上是我在项目中得到的代码片段) <!DOCTYPE html>
<html lang="{{ str_replace('_', '
浏览 14提问于2021-07-18得票数 1
回答已采纳
当我完成任务时，我没有提交webpack打包的资产，比如CSS、JS，只将/resources/assets/*提交到git，并在生产机器上拉动提交，在打包js和CSS时需要一点时间来缩小CSS和js。
此时，许多用户请求页面，有些页面包含CSS，如<link rel="stylesheet" href="{{ mix('/css/xxxxx.css') }}"/>，会在日志中(如Unable to locate Mix file: /css/xxxxx.css )导致异常。
我怎么才能避免发生这种事呢？
浏览 0提问于2018-09-07得票数 1
1回答
我在我的项目中使用了Laravel mix。我需要更改公共文件夹中的app.css，每当我注释或删除样式并运行npm run dev时，样式都会返回。我要他们消失。我如何永久地阻止它？
浏览 1提问于2018-03-21得票数 0
我安装了一个新的Laravel项目。我想使用尾风CSS和严格按照尾风网站的指示。当我运行npm run dev时，我的资源/css/app.css文件没有填充尾风规则，而且我仍然只有三个：
@tailwind base;
@tailwind components;
@tailwind utilities;
带有未知警告的规则@tailwindcss(unknownAtRules)。我看了一个视频，这个人运行npm的视频，app.css文件中充满了由Tailwind填充的规则。
这是我的资源目录结构
tailwind.config.js
module.exports = {
c
浏览 11提问于2022-02-22得票数 0
我正在使用Laravel /VueJ(第2版)，当我将我的文件上传到实时服务器时，它工作了！很棒，但问题是，现在我正在对组件进行更改，并添加了更多在本地工作的功能，当我上传这些文件以重新使用时，它不会显示新的更改。还在展示老东西..。知道怎么解决这个问题吗？我被困在这上面两天了，我已经通过清除浏览器缓存，硬重新加载，cookie来检查了。
注意：在运行npm run dev和npm run watch之后也上传了文件，但没有成功:(
My Welcome.blade.php
<div id="app" >
<main-component
浏览 4提问于2020-09-30得票数 0
回答已采纳
3回答
我一直在学习Laravel (8)，并很享受使用tailwindcss的乐趣。也就是说，我仍然希望使用Bootstrap来做一些事情。我在查找有关如何在laravel 8中设置bootstrap和laravel mix的文档时遇到了问题。更具体地说，在resources/css/app.css文件中，我们为顺风设置了以下内容：
@tailwind base;
@tailwind components;
@tailwind utilities;
但是我不确定这里的bootstrap会用到什么。
我注意到老版本的laravel使用了php artisan ui bootstrap，但据我所见，这在
浏览 1提问于2020-12-08得票数 3
1回答
如何排除使用Laravel和Webpack上传到S3的特定文件夹和文件？
我尝试过这个解决方案-- 和，但它没有做我想做的事情。
const mix = require('laravel-mix');
const S3Plugin = require('webpack-s3-plugin');
require('dotenv').config();
/*
|--------------------------------------------------------------------------
| Mix Asset Manage
浏览 4提问于2022-03-25得票数 0
回答已采纳
我正在研究laravel框架，我遇到了使用.version的灵丹妙药函数。
elixir(function(mix) {
mix.sass('app.scss')
.version('css/app.css');
});
我想知道这个功能的重要性(在什么情况下)？
浏览 1提问于2016-05-14得票数 0
回答已采纳
在这里mix.sass('resources/assets/frontend/sass/main.scss'，‘ctrl+c / mix.sass /mix.sass/css/app.css’)；
正在等待编译...2:07:13 PM 95%排放
编译成功，时间为404ms 2:07:14 PM
正在等待编译...2:07:14 PM 95%排放
编译成功，在268ms 2:07:14 PM等待编译...2:07:14 PM 95%排放
编译成功，时间为268ms 2:07:15 PM
正在等待编译...2:07:15 PM 95%排放
编译成功，265ms 2:07:15
浏览 0提问于2017-04-01得票数 4
我正在尝试更改webpack.mix.js中的CSS输出样式，但是这似乎只影响开发构建。如何将outpoutStyle选项应用于生产构建？ 这是我在webpack.mix.js文件中的代码，更改"outputstyle“的值只会影响开发构建。 mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
outputStyle : 'expanded'
浏览 15提问于2020-06-29得票数 2
回答已采纳
我正在使用Laravel 5.5，在webpack.mix文件中，mix.styles函数工作得很好，我完美地编译了我的css文件，但是mix.scripts没有编译我在文档中找到的js文件，即mix.babel的方法签名与scripts.mix相同，所以我使用了它，但是没有什么变化。
这是我的webpack.mix.js文件
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Ass
浏览 0提问于2017-12-25得票数 1
回答已采纳
我正在使用Laravel，当我运行npm run dev时，一切都很好，但是当我运行npm run prod时，在小型化的style.css中，所有的@import url()都会被删除！
Webpack
const mix = require('laravel-mix');
mix.setPublicPath('public');
if (mix.inProduction()) {
mix.version();
}
我没有设置，我使用mix.styles([sources, dist])来管理我的纯CSS样式文件。在我的一个消息来源中，我有如下内容
浏览 6提问于2019-10-31得票数 1
3回答
我的vue组件不会在页面上呈现，尽管有以下教程。我有以下布局(master.blade.php)： <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<
浏览 26提问于2019-05-06得票数 4
在我的最新项目中，我使用了browserSync内置的laravel，并将tailwindCss作为一个包添加了进来。
这是webpack.mix.js文件：
const mix = require("laravel-mix");
require('mix-html-builder');
mix
.setResourceRoot("../")
.setPublicPath("public/assets")
.browserSync({
proxy: 'xxx',
浏览 3提问于2022-02-15得票数 3
回答已采纳
我尝试在laravel-mix中使用sass和较少的依赖项。 webpack.mix.js： mix.js('resources/js/app.js', 'public/js')
mix.sass('resources/sass/app-sass.scss', 'public/css')
mix.less('resources/less/app-less.less', 'public/css');
mix.combine(['public/css/app-sass.css', &#
浏览 23提问于2019-12-18得票数 0
2回答
我的网站没有呈现我的CSS。在我的本地主机上，一切正常。我很难理解为什么？
更新1:我卸载了所有的东西并重新安装，希望在此之前做得不对.但同样的问题依然存在。尝试修改路径/css/app.css，添加/public，甚至添加完整的路径用户/name/projectname/public等，也没有工作。
更新2:将我的css/app.css文件与另一个项目进行比较，似乎代码没有正确地呈现。我用我的另一个项目(使用相同的框架和依赖项)替换了app.css，但是，同样的问题仍然存在。CSS正在呈现。
回购-
技术栈: Laravel 7，TailwindCSS，Digitial Tech，Lar
浏览 0提问于2020-04-16得票数 0
回答已采纳
我使用Laravel编译了我的样式表和javascript文件，代码如下：
const { mix } = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, flue
浏览 3提问于2017-03-23得票数 5
第一次用拉拉混合，我肯定我错过了一些简单的东西。
我有一个项目，我试图使用Laravel编译尾风，然后使用清除删除任何未使用的css。
package.json
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules
浏览 0提问于2019-06-08得票数 0
我在Laravel5.4中使用VueJS。我已经用npm install安装了vue依赖项。运行npm run watch或npm run dev成功编译代码。我遇到的问题是从resources/assets/加载资产
这就是我在我的刀刃上所做的：
<head>
...
<link href="{{mix('/css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
....
<scri
浏览 1提问于2018-02-15得票数 0
1回答
我正在尝试将metronic主题整合到我现有的laravel项目中。我在拉勒维尔宅基地工作。
我一个接一个地执行了"“链接中的步骤，没有发现任何错误。但是，没有出现步骤6中提到的/laravel/public/js/app.js和/laravel/public/js/app.css文件。这是什么原因？
我的webpack.mix.js文件内容：
const mix = require('laravel-mix');
/*
|------------------------------------------------------------------------
浏览 1提问于2020-05-04得票数 1
回答已采纳
1回答
当我引用了一个Library项目时，我在为Android项目添加资源时遇到了问题。这就是我所看到的
这两个项目都编译并运行良好。当我将库项目链接起来并希望向主项目添加字符串资源时，行在XML文件中，所有内容都会编译，但资源不会添加到R类中。我已经尝试过清理项目，删除R类等等。但是，在我链接库之前已经存在的所有资源都在R中，而且两个项目中存在的资源都被正确地合并了。
为了解决这个问题，我需要解除库项目的链接，在主项目中注释对它的所有引用，然后将我添加的所有资源添加到R类中。(然后我需要重新链接图书馆)。
我在用Eclipse and ADT。
是什么导致的？
谢谢!
浏览 0提问于2011-06-27得票数 1
1回答
使用Xubuntu18.04下的PhpStorm 2020.1，我正在将一个JS游戏构建成一个Laravel6.18.8新安装。
每次我运行npm run watch或npm run watch-poll时，我的资产都会被无限地重新构建。
这是我的配置：
// Dependencies in package.json:
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.4.1",
"cross-env": "
浏览 0提问于2020-04-19得票数 1
使用Laravel灵丹妙药功能总是很好。但我有一些基本的问题。首先，当我们运行gulp命令时，它会连接所有的css和js文件。但是我想我的所有页面都不需要datatables.css和datatables.js/boostrap-wysihtml。如何处理这种情况？
其次，让我们回顾一下这段代码：
elixir(function(mix) {
mix.styles([
"bootstrap.min.css",
"owl.carousel.css",
"animate.css",
"
浏览 0提问于2016-06-03得票数 0
4回答
我已经尝试了许多解决方案，但没有找到任何有效的解决方案。
我的所有文件的基目录都是localhost/ My
我把这个放进了我的webpack。让mix = require('laravel-mix')；
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mi
浏览 3提问于2018-12-11得票数 0
我正在尝试将tailwind css从安装到一个现有的laravel/vue项目中，该项目使用scss。
安装软件包
纱线加装-D尾线“最新的后置”最新的自动重新定影器
创建tailwind.config.js
npx尾风箱
向webpack.mix.js添加顺风
const mix = require('laravel-mix')；const path = require('path')；mix.js('resources/js/app.js'，'public/js') .postCss("r
浏览 11提问于2022-03-18得票数 1
6回答
我正在尝试将Font添加到新安装的Laravel 8 Jetstream中，但是收到了以下错误
来自PostCSS插件的未知错误。您当前的PostCSS版本为8.2.4，但postcss-import使用7.0.35。也许这就是下面错误的根源。
错误:未能找到“~@fortawesome/fontawesome/scss/brand”
App.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
浏览 11提问于2021-01-20得票数 8
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
