登录
当前位置： 首页 > 知识库问答 >
问题：

Laravel mix中的URL处理在postCSS中不起作用

李耀
2023-03-14

我在Laravel Mix中的URL处理有问题。

这是我的app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/*---------- import LightGallery from node_modules  ----------*/
@import 'lightgallery.js';

/*---------- my styles for thumbnails ----------*/ 
@import 'includes/thumbnails';

这是我的webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js')
   .scripts([
          'public/js/app.js',
          'resources/js/includes/script.js'
      ],  'public/js/app.js')
   .postCss('resources/css/app.css', 'public/css', [
      require('postcss-import'), 
      require('tailwindcss'),
      require('postcss-extend'), 
      require('postcss-nested'),
      require('autoprefixer'),
    ]);

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^9.8.6",
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "postcss": "^8.2.6",
        "postcss-extend": "^1.0.5",
        "postcss-import": "^12.0.1",
        "postcss-simple-extend": "^1.0.0",
        "postcss-simple-vars": "^6.0.3",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.32.7",
        "sass-loader": "^8.0.2",
        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@tkh/tailwind-plugin-flex-basis": "^1.4.0",
        "lightgallery.js": "^1.4.0",
        "npm": "^7.3.0"
    }
}

如果我执行npm运行dev，我会看到以下错误。看来node_modules/lightgallery.js/dist中的字体和图像不会被laravel mix复制

> dev
> npm run development


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

98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 7 errors                               9:06:04 PM

These relative modules were not found:

* ../fonts/lg.svg?22t19m in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../fonts/lg.ttf?22t19m in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../fonts/lg.woff?22t19m in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/loading.gif in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/video-play.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/vimeo-play.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/youtube-play.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
     Asset     Size   Chunks             Chunk Names
/js/app.js  730 KiB  /js/app  [emitted]  /js/app

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/lg.svg?22t19m' in '/home/http/app/resources/css'
    at /home/http/app/node_modules/webpack/lib/Compilation.js:925:10
    at /home/http/app/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /home/http/app/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /home/http/app/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /home/http/app/node_modules/neo-async/async.js:2830:7
    at /home/http/app/node_modules/neo-async/async.js:6877:13
    at /home/http/app/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
    at /home/http/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
    at processTicksAndRejections (node:internal/process/task_queues:75:11)
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../fonts/lg.svg?22t19m' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1351805-1351838
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../fonts/lg.ttf?22t19m' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1351654-1351687
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../fonts/lg.woff?22t19m' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1351731-1351765
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../img/loading.gif' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1368504-1368533
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../img/video-play.png' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1359119-1359151
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../img/vimeo-play.png' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1358797-1358829 7:1358953-1358985
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../img/youtube-play.png' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1359422-1359456 7:1359582-1359616
 @ ./resources/css/app.css

但如果我用sass做同样的工作，那么就可以用后CSS完成所有的工作。这里是我的工作代码，但我想摆脱sass并用postCSS插件替换所有

/resources/css/app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'includes/thumbnails';

/resources/sass/app.scss

@import '~lightgallery.js/src/sass/lightgallery';
/* postcss-mixin plugin also doesn't work in my mix file */ 
@import 'mixins/svg';

webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js')
   .scripts([
          'public/js/app.js',
          'resources/js/includes/script.js'
      ],  'public/js/app.js')
   .sass('resources/sass/app.scss', 'public/css')
   .styles([
        'resources/css/app.css',
        'public/css/app.css'
      ],'public/css/app.css')
   .postCss('public/css/app.css', 'public/css', [
      require('postcss-import'),
      require('tailwindcss'),
      require('postcss-extend'),
      require('postcss-nested'),
      require('autoprefixer'),
    ]);

共有1个答案

佟和安
2023-03-14

首先，在webpack.mix.js中，需要SASS行吗？因为这会引起问题。

.sass('resources/sass/app.scss', 'public/css')

确保出现颚化符以引用您的app.CSS for lightgallery.js中的node_modules/目录，并使用完整的CSS路径。

@import '~lightgallery.js/dist/css/lightgallery.min.css';

更新Laravel Mix6、Webpack、Autoprefixer和PostCSS的节点依赖关系，并将package.json的“scripts”部分更新为以下内容。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "@tkh/tailwind-plugin-flex-basis": "^1.4.0",
        "alpinejs": "^2.8.0",
        "autoprefixer": "^10.2.4",
        "axios": "^0.21",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.11",
        "lightgallery.js": "^1.4.0",
        "lodash": "^4.17.20",
        "postcss": "^8.2.6",
        "postcss-extend": "^1.0.5",
        "postcss-import": "^8.2.0",
        "postcss-simple-extend": "^1.0.0",
        "postcss-simple-vars": "^6.0.3",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.32.8",
        "sass-loader": "^9.0.3",
        "tailwindcss": "2.0.3",
        "vue-template-compiler": "^2.6.12",
        "webpack": "^5.23.0"
    }
}

然后运行npm update&&npm Install。

现在可以运行npm run dev。

 类似资料：
  • Dynamodb批处理在Lambda中不起作用

    我试图使用batchWrite将一个数据插入Dynamodb，但它无法插入数据。它只显示此消息（但没有错误消息）。 然后，无法插入数据。我试着用put，效果很好。我用的是Lambda。这是代码。

  • 我在OOP中的处理草图不起作用

    下面的代码旨在将蓝色背景和三个移动形状（圆形、正方形、三角形）绘制到屏幕上。然而，代码是用面向对象编程编写的，我的草图在处理IDE的Java模式下工作得很好，但在OpenProcessing中却不能工作，这是不对的。代码编译得很好。我想我在OOP中做了一些不正确的事情。谁能帮帮我吗？谢了！

  • 异常处理程序在spring boot中不起作用

    我正在用spring boot 2开发Rest API，我试图创建一个ExceptionHandler，但它似乎不起作用。 我有以下@GetMapping方法： customerRepository是扩展CrudRepository接口的接口。 customerNotFoundException的@ExceptionHandler如下所示： 我还对ResponseEntityExceptionHa

  • Android中Url的Json解析，不起作用

    我正在解析URL中的数据，下面提到了这个错误。 原始数据从服务器完美显示。无法使用Json解析拆分数据。 请帮我解决这个错误 编辑：1 来自URL的Json响应 错误： 主要活动。JAVA

  • 导入元数据提取器库在处理中不起作用

    我试图通过drewnoakes导入元数据提取器库，从正在处理的图像中提取EXIF数据。通用域名格式。我尝试了两种可能的方法来导入库，但它仍然不起作用。 我所做的： 1） 将JAR文件拖放到我的草图中，并使用import语句import com。drew。*；但它仍在抱怨图书馆不存在。 2） 将JAR文件放在My Documents文件夹的Processing文件夹中，并使用“import libr

  • Python多处理示例不起作用

    问题内容： 我正在尝试学习使用方法，但无法正常工作。这是文档中的代码 它应该输出 你好鲍勃 但是我得到了 没有错误或其他消息，它只是坐在那里，它从32位版本的python 2.7的Windows 7计算机上的已保存.py文件中运行 问题答案： 我的猜测是您正在使用IDLE尝试运行此脚本。不幸的是，此示例无法在IDLE中正确运行。请注意文档开头的注释： 注意：此软件包中的功能要求子 模块可以导入 主

相关问答

导入元数据提取器库在处理中不起作用Protractor click在IE中不起作用，但在chrome中起作用为什么OpenSimplexNoise处理库不起作用？旋转在Java物理引擎中不起作用$HTTP.POST在AngularJS中不起作用

相关文章

UIAlertView在Swift中不起作用addEventListener在IE8中不起作用fflush（）在Linux中不起作用CountDownTimer.cancel（）在Android中不起作用os.system在Python中不起作用

相关阅读

处理死锁的策略Flask Cookies处理Django Cookies处理Java时间日期的处理Selenium WebDriver处理Alert

相关工具

PostCSSpostcss-importpostcss-eachpostcss-lessember-cli-postcss

相关文档

Python 文本处理PyTorch 自然语言处理Python 自然语言处理基于 Node.js 的 HTTPS MITM 中间人代理的原理和实现跟我一起来写操作系统
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.