标签: laravel-mix

通过Sass集成Laravel和Materialize-CSS的正确方法是什么？

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

对于这个非常冗长的例子,我将从一个新的laravel安装开始.

默认webpack.mix.js:

const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Run Code Online (Sandbox Code Playgroud)

此默认配置有效:

$ npm run dev
 DONE  Compiled successfully in 4287ms                                                                                                                    11:19:15 PM

                                                                    Asset      Size  Chunks                    Chunk Names
  fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1   20.1 kB          [emitted]
  fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760    109 kB          [emitted]
  fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512   45.4 kB          [emitted]
 fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158   23.4 kB          [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb     18 kB          [emitted]
                                                               /js/app.js   1.16 MB       0  [emitted]  [big]  /js/app
                                                             /css/app.css    686 kB       0  [emitted]  [big]  /js/app
                                                        mix-manifest.json  66 bytes          [emitted]

Run Code Online (Sandbox Code Playgroud)

但我想使用物化:

$ npm install materialize-css --save-dev
/home/vagrant/Code/laravel …

Run Code Online (Sandbox Code Playgroud)

sass materialize webpack laravel-mix

7
推荐指数

1
解决办法

4329
查看次数

使用laravel mix设置外部库

我需要在web包上使用外部库和laravel-mix.在网络包上我应该按照webpack文档中的描述做这样的事情

{
    output: {
        // export itself to a global var
        libraryTarget: "var",
        // name of the global var: "Foo"
        library: "Foo"
    },
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    }
}

Run Code Online (Sandbox Code Playgroud)

但我可以用laravel mix来做到这一点吗？

webpack laravel-5 laravel-mix

7
推荐指数

1
解决办法

2759
查看次数

Laravel Mix多个入口点生成一个manifest.js

我目前在我的Mix文件中尝试使用多个入口点时遇到问题.

// Mix frontend resources.
mix.js('resources/assets/js/app.js', 'public/js')
    .extract([
        'jquery', 'bootstrap', 'aos', 'lity',
    ]);

...

// Mix app resources.
mix.js('resources/assets/app/js/app.js', 'public/app/js');

Run Code Online (Sandbox Code Playgroud)

我的Mix文件中有三个入口点.一个用于前端,后端和我的"公共应用"文件.上面的代码将我的前端vendor.js和manifest.js文件存储public/app/js在里面public/js.

当我然后尝试参考

<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('app/js/app.js') }}"></script>

Run Code Online (Sandbox Code Playgroud)

它抛出webpack错误:

Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (manifest.js?id=09ecc9b…:55)
    at Object../node_modules/vue/dist/vue.common.js (app.js?id=6431fd7…:sourcemap:28709)
    at __webpack_require__ (manifest.js?id=09ecc9b…:55)
    at Object../resources/assets/app/js/app.js (app.js?id=6431fd7…:sourcemap:37900)
    at __webpack_require__ (manifest.js?id=09ecc9b…:55)
    at Object.0 (app.js?id=6431fd7…:sourcemap:38015)
    at __webpack_require__ (manifest.js?id=09ecc9b…:55)
    at webpackJsonpCallback (manifest.js?id=09ecc9b…:26)
    at app.js?id=6431fd7…:sourcemap:1

Run Code Online (Sandbox Code Playgroud)

目前有一种方法可以在Mix文件中使用多个入口点吗？

php laravel laravel-mix

7
推荐指数

1
解决办法

4810
查看次数

带有laravel-mix的vue-loader 15

所以我试图将laravel项目中的vue-loader更新到15.2.1版.在更新依赖项并运行npm run watch之后,我得到一个错误,我应该使用VueLoaderPlugin.我像官方文档建议的那样添加了它.
尝试再次运行构建命令后,我的每个单个文件组件都会收到此错误:

    ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass
Module build failed:
<template lang="pug">
^
      Invalid CSS after "": expected 1 selector or at-rule, was ".user-container"
      in C:\MAMP\htdocs\lightCRM\resources\assets\js\components\users\User.vue (line 1, column 1)
 @ ./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass 4:14-338
 @ ./resources/assets/js/components/users/User.vue?vue&type=style&index=0&id=d0ee1f54&scoped=true&lang=sass
 @ ./resources/assets/js/components/users/User.vue
 @ ./resources/assets/js/routes/routes.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js

Run Code Online (Sandbox Code Playgroud)

如果我将此规则添加到我的laravel-mix配置中

rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]

Run Code Online (Sandbox Code Playgroud)

然后编译成功运行,但在控制台中我得到:

[vue warn]: failed to mount component: template or render function not defined.

Run Code Online (Sandbox Code Playgroud)

我使用合适的装载机在我的vue组件中使用sass和pug.添加更多规则laravel-mix配置似乎没有任何区别.所有依赖项都是最新的,并且可以很好地使用vue-loader v.14.2.2.Node.js版本是10.1.0和npm是6.1.0.
这是我的package.json:

    {
    "private": …

Run Code Online (Sandbox Code Playgroud)

laravel vue.js laravel-5 vue-loader laravel-mix

Ник*_*лис

7
推荐指数

1
解决办法

5549
查看次数

Docker 上的 Laravel Mix 通知 - 无通知显示

我有一个 Laravel 项目，并使用 Laradock 运行它。另外，我在其上添加了 vue js 组件并运行npm run dev或npm run watch编译我所做的每个更改，但现在每当我尝试编译时它都不会显示任何 Laravel Mix 通知。

在我使用 xampp 之前，通知工作正常。我只是碰巧知道在我的项目中使用 Docker 很棒。

如果有人知道如何让我的 Laravel Mix notification 在 Docker 中再次工作。谢谢！

docker laravel-5 docker-compose laravel-mix laradock

7
推荐指数

0
解决办法

479
查看次数

删除 Laravel Mix 中的临时文件

我想在 laravel-mix 构建期间或之后删除临时构建文件。
这是我目前拥有但del不起作用的一些代码：

const mix = require('laravel-mix');
const del = require('del');

// compile sass into temp css file
mix.sass('resources/stylesheets/style.scss', 'public/css/temp.css');

// compile css
mix.styles([
    // other css stylesheets here...
    'public/css/temp.css' // include temp css file
], 'public/css/admin.min.css');

// delete temp css file
del('public/css/temp.css'); // not deleting the file

Run Code Online (Sandbox Code Playgroud)

javascript del webpack laravel-mix

7
推荐指数

1
解决办法

2237
查看次数

Laravel Mix在Mix V4 +中始终未定义

npm run升级到Mix v4.x之后，对的任何调用都将导致不确定混音。我每次运行都会看到这样的错误：

> npm run development


> @ development /project
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

/project/node_modules/webpack-cli/bin/cli.js:235
                throw err;
                ^

TypeError: Cannot read property 'js' of undefined
    at Object.<anonymous> (/project/webpack.mix.js:15:5)
    at Module._compile (/project/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/project/node_modules/laravel-mix/setup/webpack.config.js:12:1)
    at Module._compile (/project/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS …

Run Code Online (Sandbox Code Playgroud)

npm laravel yarnpkg laravel-mix laravel-5.5

7
推荐指数

1
解决办法

2095
查看次数

像其他资产一样通过 CDN URL 加载动态导入的块

我有一个指向我的基域的 CDN，基本上是 1:1 映射。我正在尝试在服务器上构建我的包，并且我想使用 CDN URL 加载它。我想要的之后npm run build是：

public/
  css/
    app.css
  js/
    index.js
    1.js.gz
    1.js
    2.js.gz
    2.js

Run Code Online (Sandbox Code Playgroud)

然后我的 CDN 会反映这一点，所以我希望这些资源像这样加载：

https://mycdn.com/public/js/index.js
https://mycdn.com/public/css/app.css

Run Code Online (Sandbox Code Playgroud)

我当前的webpack.mix.js配置：

mix
  .sass('resources/sass/app.css', 'public/css')
  .js('resources/js/index.js', 'public/js')

Run Code Online (Sandbox Code Playgroud)

它会在正确的位置生成所有文件，这很好。然后我将它们包含在我的index.blade.php：

<script src="{{ elixirCDN('/js/index.js') }}"></script>

elixirCDN 是我的自定义函数：

function elixirCDN($file)
{
    $cdn = '';

    if(config('system.cdn_url'))
    {
        $cdn = config('system.cdn_url');
    }

    return $cdn . elixir($file);
}

Run Code Online (Sandbox Code Playgroud)

它基本上在文件名前面加上 CDN url，所以一切正常。

当我使用动态导入时，问题就开始了，如下所示：

const Home = () => import("./Home")

Run Code Online (Sandbox Code Playgroud)

理想的情况是它还加载 CDN：

https://mycdn.com/public/js/1.js

但事实并非如此，它加载了相对路径和我的基本域：

https://mybasedomain.com/public/js/1.js

显然，因为它是动态的。我怎样才能让我的块也从 CDN 加载？

我尝试将其设置publicPath为我的 …

javascript laravel webpack vue.js laravel-mix

7
推荐指数

1
解决办法

2350
查看次数

npm 运行生产错误：“未知选项无进展”

我正在尝试运行命令npm run dev 或npm run production. 但没有一个是成功的。一旦我运行命令，我就会收到类似图像的错误：

运行 npm run prod 后出错

我的 package.json 文件如下所示：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "dev:all": "concurrently \"npm run dev --section=js && npm run build:lang\" \"npm run dev --section=css\" \"npm run dev --section=server\" --kill-others-on-fail",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "build:lang": "cross-env babel-node ./lang.script.js",
        "clear:babel-cache": "rimraf -rf ./node_modules/.cache/babel-loader/*",
        "clear:messages": "rimraf -rf ./resources/messages/*",
        "watch": "npm run development -- --watch",
        "watch:all": "concurrently \"npm run watch --section=js\" \"npm run watch …

Run Code Online (Sandbox Code Playgroud)

laravel laravel-mix

7
推荐指数

1
解决办法

8914
查看次数

该模块的插件或加载程序报告了无效的依赖项

我有一个 Laravel/Inertia.js/Svelte 项目，我在其中导入基于svelte 组件中的Zurb Foundation设置文件的设置 sass 文件：

<style lang="scss">
    @import 'resources/sass/settings';

    ...
</style>

Run Code Online (Sandbox Code Playgroud)

该设置文件依次从 Foundation-sites 模块 (utils) 导入 sass 文件。尽管导入工作正常，但我从 Webpack 收到以下警告：

WARNING in ./resources/js/academy/transactions/orders/Order.svelte
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context 
dependencies, but this is deprecated behavior.
Loaders: …

Run Code Online (Sandbox Code Playgroud)

node-sass webpack laravel-mix svelte

7
推荐指数

0
解决办法

6842
查看次数

标签统计

laravel-mix ×10

del ×1

docker-compose ×1

laravel-5.5 ×1

materialize ×1

npm ×1

php ×1

sass ×1

«
1
…
3
4
5
6
7
…
20
»