我正在使用 Laravel Mix 和 Webpack 进行 SASS 预处理。

我的网站中有两个“主题”，我想精简它们，在需要的地方继承变量。例如，我的主要主题将按以下顺序包括：

我的默认主题如下所示：

与这个问题类似，我首先包含了主要变量，然后是默认主题变量，最后是引导程序。

在我的默认主题中，我添加!default了所有变量，以便在重新定义 Bootstrap 的地方优先使用它们，而在新的地方，它们将成为默认值。主要主题根本不使用!default。

工作示例

如果 Bootstrap 定义$brand-danger为 say red !default，我的默认主题将其重新定义为blue !default并且我的主主题将其重新定义为yellow，我的渲染输出将是黄色的 - 太棒了！

问题

当我需要引用仅在我的主要主题的其他级别定义的变量时。例如：

构建现在失败并显示错误消息primary-theme/src/scss/main.scss doesn't export content。

解决方法

我可以通过将整个 Bootstrap 变量文件复制到我的主主题并根据需要更改变量来解决这个问题，但我真的不想这样做。

问题

SASS 变量处理器实际上是如何工作的？我是否可以只更改主题中的 Bootstrap 变量之一，而不必重新定义整个文件？

这个问题很相似。

我希望在一个项目中同时使用Laravel和Materialize css 。通过 sass 文件执行此操作的最佳方法是什么？我正在寻找使用 laravel 内置的 webpack 系统。该网站说如果你想使用 SASS，这里是源代码，你需要一个 scss 编译器。谢谢，很有用。不是。

对于这个非常冗长的示例，我将从全新的 laravel 安装开始。

默认 webpack.mix.js：

此默认配置有效：

但我想使用物化：

现在有一个node_modules/materialize-css包含源代码的文件夹。我想使用 sass，因此如果需要更改某些内容，我将对框架有更大的控制权。我可以直接从 使用 webpack 构建node_modules/materialize-css/sass，但是任何要实现的更新都会覆盖我的更改。所以我需要将 sass 文件从复制node_modules/sass到resources/assets/sass.

我从node_modules/materialize-css/sass/目录执行此操作：

哪个有效：

app.scss并且_variables.scss是默认引导设置的剩余部分。 materialize.scss是框架的主要 sass 文件，它从components目录加载组件。 ghpages-materialize.scss是仅用于示例站点的 scss 文件，所以我不确定它为什么包含在此处：

因此，它似乎正在使用最终文件 ,_style.scss来自定义物化。此外，导入中未提及下划线。显然下划线被忽略了。我认为那是为了按字母顺序排列您要更改的部分，但显然它只是意味着它是一个 css partial。materialize 不是 css 部分的事实并不能阻止它以相同的方式被包含。无论如何，我将删除我不需要的文件：

_variables.scss用于引导程序，components如果需要， materialize 有它自己的。

用这个替换旧app.scss的：

并尝试再次运行 webpack：

有一个ELIFECYCLE错误，不管是什么意思，还有一些字体文件丢失。为什么 webpack 需要字体文件？我没有告诉他们。也许它们在 css 中的某个地方被提及，尽管快速搜索无法找到它。无论如何，它似乎是在 node_modules 上方的字体文件夹中寻找字体。

这会将字体目录复制到我的 laravel 目录。

然后，我再次尝试 webpack：

我想这意味着它有效？mix-manifest.json 文件有什么用？

所以现在我有一个 app.css 应该有我需要的一切。如果我需要添加自己的自定义样式，我可以编写并包含_style.scss在app.scss. 这是应该的工作方式吗？

不过，我不希望字体目录弄乱我的项目目录，而且我永远不会更改字体文件。它们应该是公开的，还是现在包含在 css 文件本身中？我怎样才能从 node_modules 中的物化加载字体呢？

最后，这个过程有什么我提出的方式应该比这更容易和更少混乱吗？

但是等等 - 我忘记了 JS！

javascript是如何使用的？只是转储到一个 JS 文件夹中，还是编译并缩小到一个文件中，或者到多个文件中？我也没有看到一个简单的方法来做到这一点。

我是第一次使用 Laravel。在 5.4 版本中，他们引入了 laraval mix。我试图将静态网站的 SASS（我用 gulp 编译）粘贴到资源文件夹中的 sass 文件中。一切顺利，我的SASS会被编译成公共地图中的app.css文件。

我有 1 个主要问题。sass 文件（资源/资产/图像）中的所有图像都没有像我想要的那样编​​译。

SASS 文件中的代码 (resources/assets/SASS/banners.scss)

与混合编译（app.css）

因此，不是像我在我的 SASS 文件中那样将 url 编译为 css，而是将其编译为最后带有哈希的不同的东西。此外，在编译 sass 后，它会使用我在 SASS 文件中使用的图像生成图像映射。我的图像地图最初位于资源/资产/图像。

我不知道我做错了什么。我试图更改我的 sass 文件中的 url，但这无济于事。有人可以帮助我吗？或者有其他解决方案吗？

webpack.mix 代码/js

我正在尝试使用运行 webpack 的Laravel Mix将 Angular 应用程序编译到一个文件中。我得到错误：

未捕获的 ReferenceError：未定义应用程序

我的webpack.mix.js：

我的bundle.js：

我的app/app.js：

Uncaught ReferenceError: app is not defined 当我打电话时，我得到了app.controller()，例如app/Controller/aboutController.js：

我错过了什么吗？如果我使用它一一加载所有文件，html它工作正常。

I have a project that has about 10 javascript files. I want to use Laravel mix webpack to combine and version the js files. The files get combined but the versioning is not working. It only works for my scss files. It used to work in Laravel elixir. I checked the mix-manifest.json file in the public directory and this is what I found:

I looked for the mix.js file and I could not find it anywhere in my project.

Here is my webpack.mix.js file:

Thank you

我正在尝试通过 Laravel 5.4 中的 Mix（以前是 Elixer）（使用https://laravel.com/docs/5.4/mix ）设置一个 SASS 到 CSS 编译器。一切正常，它可以编译，我可以通过 npm 设置一个观察者，但通过views/layout/app.blade.php文件引用它，例如：

不起作用。在我的浏览器中，它当然显示为：

这是错误的道路。它应该引用http://localhost/website/public/css/app.css，但是更改上面 Mix 代码中的任何内容都会产生 Laravel 错误。

我究竟做错了什么？我是否需要在某处设置基本路径，我的 .htaccess 是否错误，或者..？谢谢你的任何答案。

我有以下 webpack.mix.js：

当我运行时出现npm run dev此错误： cmd 中的错误与 homestead ssh

我正在尝试将vue-admin与laravel-mix一起使用，但每次运行时 npm run dev

它总是失败：

You may need an appropriate loader to handle this file type. | store, | nprogress, | ...App | }) |

我在这里知道一种可能的解决方案：https ://github.com/JeffreyWay/laravel-mix/issues/76

尝试过的节点版本：6.x、7.x

但是使用插件创建 .babelrc 文件并没有帮助。是否有可能在编译 vue-admin 模块时以某种方式覆盖 babelrc？

我是否必须向 webpack 配置添加自定义查询？

.babelrc：

我是 Laravel 的新手，并按照 Laravel 5.4 的 Laracast 教程
阅读了 Laravel mix 以及如何使用 Webpack Laravel Mix 工具编译资产。所以我尝试使用npm添加一个 JavaScript 包

1-Installed AlertifyJS。 2- 添加在 3- 执行中。资产被编译为，在这里我可以通过找到alertify关键字来查看alertifyjs代码。 我在resources\assets\js\app.js中使用了如下所示的alertify代码：
require('alertifyjs')resources\assets\js\bootstrap.js
npm run devpublic\js\app.js

查看文件：

问题：当我点击按钮Show Alert时，
alertify is not defined错误被记录到控制台。编译资产时我错过了什么吗？

了解 Laravel 混合

我目前正在将我的一个网站迁移到 Laravel，以使其在未来更易于维护......我有丰富的使用 Laravel 构建 API 的经验，但我使用 Laravel 构建网站的经验非常有限，因此我我需要其他专业人士的一点指导。

简而言之，如果有人能抽出几分钟的时间，我将非常感谢以下非常简单的问题的答案......

基于文件的 JS 和 CSS 而不是基于应用程序

我喜欢以特定方式编写我的 JS 和 CSS 文件，其中每个页面都有自己的与页面相关的特定文件。例如，about.php可能具有以下依赖项：

JS：

• jquery.js
• any_other_third_party_library.js
• app.js（全局函数）
• about.js（页面特定功能）

CSS：

• some_third_party_library.css
• app.css（全球风格）
• about.css（页面特定样式）

在我自己的框架上，上述内容将被合并并缩小为一个用于 JS 的文件和一个用于 CSS 的文件。据我了解，Laravel Mix 正是这样做的......

但是，据我所知，执行此操作的方法如下：

webpack.mix.js：

很简单，我想知道什么；以上是解决这个问题的正确方法吗？有没有更好、更有效的方法来为每个页面自动执行此操作？

bootstrap.js 和 app.js 文件是什么？

从我所见，这些文件只是加载依赖项，但这有点令人困惑，因为某些依赖项可能是特定于页面的......请有人能更详细地解释一下这些文件的用途吗？或者至少，他们之间有什么区别......

摆脱 Vue

我没有兴趣在Vue我的项目中使用，所以我删除了以下文件：

和Vueapp.js 中的代码

这有什么关系吗？