URL Laravel 混合处理在 postCSS 中不起作用
URL Processing in Laravel mix doesn't work in postCSS
我在 URL 处理 Laravel 混合时遇到问题。
这是我的 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 代替 postCss 做同样的工作，一切正常。
这是我的工作代码，但我想摆脱 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'),
]);
首先，在webpack.mix.js中，你需要SASS行吗？因为它会引起问题。
.sass('resources/sass/app.scss', 'public/css')
确保存在波浪号以引用 app.css 中的 node_modules/ 目录用于 lightgallery.js 并使用完整的 CSS 路径。
@import '~lightgallery.js/dist/css/lightgallery.min.css';
更新 Laravel Mix 6、Webpack、Autoprefixer 和 PostCSS 的节点依赖项，并将 package.json 的“脚本”部分更新为以下内容。
{
"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.
试试看
webpack.mix.js.
使用 npm 安装 webpack-livereload-plugin
var LiveReloadPlugin = require('webpack-livereload-plugin');
mix.webpackConfig({
plugins: [new LiveReloadPlugin()],
stats: {
children: true
}
});
我在 URL 处理 Laravel 混合时遇到问题。
这是我的 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 代替 postCss 做同样的工作，一切正常。 这是我的工作代码，但我想摆脱 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'),
]);
首先，在webpack.mix.js中，你需要SASS行吗？因为它会引起问题。
.sass('resources/sass/app.scss', 'public/css')
确保存在波浪号以引用 app.css 中的 node_modules/ 目录用于 lightgallery.js 并使用完整的 CSS 路径。
@import '~lightgallery.js/dist/css/lightgallery.min.css';
更新 Laravel Mix 6、Webpack、Autoprefixer 和 PostCSS 的节点依赖项，并将 package.json 的“脚本”部分更新为以下内容。
{
"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.
试试看 webpack.mix.js.
使用 npm 安装 webpack-livereload-plugin
var LiveReloadPlugin = require('webpack-livereload-plugin');
mix.webpackConfig({
plugins: [new LiveReloadPlugin()],
stats: {
children: true
}
});