I'm trying to resurrect an older Laravel project (5.8.38) that used Semantic UI for styling the user interface. Since Semantic UI is no longer being developed, I'm also switching to Fomantic UI. I'd like to use Laravel Mix to build and version my css and js files so that I can profit from cache busting.
So far:
- I have installed
fomantic-uiwith NPM - I have run
npx gulp installto set upsemantic.jsonand asemanticfolder in the root of my project folder with all the necessary files, as per Fomantic UI documentation - I have run
npx gulp buildto make sure Fomantic UI is ok building, and it is.
My complete package.json looks like this:
{
"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": {
"axios": "^1.7.9",
"bootstrap": "^5.3.3",
"cross-env": "^5.1",
"gulp": "^5.0.0",
"jquery": "^3.2",
"laravel-mix": "^6.0.49",
"less": "^4.2.2",
"less-loader": "^12.2.0",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^5.0.0",
"fomantic-ui": "^2.9.3",
"vue": "^3.5.13",
"webpack": "^5.98.0"
}
}
Then, to test Laravel Mix, I put a mix.less("semantic/semantic.less", "resources/assets/less/compiled/test.css"); in my webpack.mix.js. I would expect it to build a Fomantic UI distribution and produce the same result as npx gulp build above.
Instead, I get this error:
✖ Mix
Compiled with some errors in 33.67ms
ERROR in mix
Module not found: Error: Can't resolve '/Users/psychomachine/Development/psychomachine/rf-new/semantic/semantic.less' in '/Users/psychomachine/Development/psychomachine/rf-new'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json"]'?
webpack compiled with 1 error
I'm assuming this is a webpack configuration issue, but I don't have a webpack config file in my root, and since I'm using Laravel Mix, I don't think I need a separate webpack config file anyway.
So, following the logic of the error message, I tried adding this to webpack.mix.js:
mix.webpackConfig({
resolve: {
extensions: [
".*",
".wasm",
".mjs",
".js",
".jsx",
".json",
"",
".webpack.js",
".web.js",
".less",
],
},
});
But then the error gets even more absurd:
ERROR in mix
Module not found: Error: Can't resolve '/Users/psychomachine/Development/psychomachine/rf-new/semantic/semantic.less' in '/Users/psychomachine/Development/psychomachine/rf-new'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".*","",".webpack.js",".web.js",".less"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".*","",".webpack.js",".web.js",".less"]'?
At this point, I don't know how to proceed. I'd be enormously grateful for any tips that you may have.