mister-bk / craft-plugin-mix Goto Github PK
View Code? Open in Web Editor NEWHelper plugin for Laravel Mix in Craft CMS templates
License: MIT License
Helper plugin for Laravel Mix in Craft CMS templates
License: MIT License
The plugin assumes that the mix-manifest.json and the asset files are in the same directory. This can lead to problems, because it requires that mix.setPublicPath() is set correctly in the webpack.mix.js configuration first. If not, the user really doesn't know why the plugin doesn't work!
I think the idea of the asset path setting is addressing this issue (to be able to use mix.setPublicPath()), but it's misleading to the user. It looks like this is simply to shorten the asset file path for the Twig function mix() only.
It should be mentioned that you have to set the mix public path in your mix config exactly like this ... or there should be an additional path setting for the manifest file!
Also configuring via a php file in config/ (as is common with other plugins) would be nice.
BTW: is the public path setting really necessary? Craft offers this information internally imho.
Will this work with Craft 4?
As the settings require something to be added to the Asset Path field, it's not possible to have CSS or JS under /web/css/app.css or /web/js/app.js.
Entering "/" leaves a double slash on the field output, which can't be connected to.
I was wondering if you had any plans to support Hot Module Replacement?
https://github.com/JeffreyWay/laravel-mix/blob/master/docs/hot-module-replacement.md
Thanks!
Hi, is it possible that you can describe the differences in the usage methods with a little more detail? For example, when would I use this method:
<script src="{{ mix('js/main.js') }}"></script>
Over this method:
{{ craft.mix.withTag('js/main.js') | raw }}
With normal mix you edit webpack.mix.js. I don't see this file anywhere.
Shouldn't I need to run npm run dev to compile my js? I also want to add the tailwind larval mix plugin.
or do I still need to do the standard Laravel Mix install?
Hey, would it be possible to updated the module to allow you to set the Asset Path
to be blank?
Reason: In projects, we put js/css/img
folders directly in web/{css,js,img}
.
Manifest contains:
{
"/assets/main.js": "/assets/main.js?id=4201cd156b22ae18fa0a",
"/assets/main.css": "/assets/main.css?id=d4c7912ff5280a471880"
}
Using <link rel="stylesheet" href="{{ mix('main.css') }}">
outputs <link rel="stylesheet" href="/assets/main.css">
with no hash.
What am I doing wrong?
I have some background images defined in my css, like this:
background-image: url('/build/images/logo-mobile.png')
On my first run, images defined in css is not shown, and I get console.log errors for them, like " 404 http://localhost:8080/build/images/logo-desktop.png".
The run script is (hot reloading):
cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js
But if I go into the css file that defines the image background url, and just change whatever, and save it, then everything is picked up by laravel mix, and all url's are correct. If I restart webpack-dev-server, then the image asset url's are not working again.
My full webpack.mix.js
:
const mix = require('laravel-mix')
const autoprefixer = require('autoprefixer')
const autoprefixOptions = {}
const options = {
postCss: [
autoprefixer(autoprefixOptions)
]
}
const browserSync = {
notify: false,
files: [
'templates/**/*'
]
}
mix
.setPublicPath('web/build')
.copy('assets/static/fonts/', 'web/build/fonts/')
.copy('assets/static/images/', 'web/build/images/')
.copy('assets/static/favico/', 'web/build/favico/')
.js('assets/js/app.js', 'web/build/app.js')
.sass('assets/sass/main.sass', 'web/build/app.css')
.sourceMaps()
.options(options)
.browserSync(browserSync)
Any ideas what's going on?
Just wanted to say how useful I find this plugin.
THANK YOU.
Currently, to use the plugin, you have to define the values for the required fields via the admin. Craft recently (in 3.2 I believe) allow for use of environment variable values in the Control Panel values.
It would be great if this module also allowed for this like so:
Currently, this tag {{ craft.mix.withTag('css/app.css') | raw }}
will render this <link rel="stylesheet" href="/$WEB_ROOT_PATH/assets/css/app.css">
Thanks for making this plugin!
Is the settings link missing from the plugin page? I found the page at 'admin/settings/plugins/mix' but would be good to get a link too.
... hitting Enter prematurely isn't what I'm missing. :)
As far as I can tell, Laravel Mix and this plugin are installed correctly & running, however the output in the browser suggests it isn't loading in versioned assets.
In a Twig template I have:
<link rel="stylesheet" href="{{ mix('css/home.css') }}">
Which outputs the following into the browser:
<link rel="stylesheet" href="/assets/css/home.css">
That's not loading in the versioned asset, right?
My mix-manifest.json looks like this:
{ "/dist/web/assets/css/app.css": "/dist/web/assets/css/app.css?id=a13f60b345423483fe2b", "/dist/web/assets/css/home.css": "/dist/web/assets/css/home.css?id=19e2171da258b1e4ae32" }
Shouldn't the browser output look like this instead?
<link rel="stylesheet" href="/assets/css/home.css?id=19e2171da258b1e4ae32">
Hi, think I must be missing something or not have the settings correct, but I cannot figure out what is amis?
In a Twig template I have:
<link rel="stylesheet" href="{{ mix('css/style.css') }}">
Which outputs the following into the browser:
<link rel="stylesheet" href="/assets/css/style.css">
That's not loading in the versioned asset.
My mix-manifest.json looks like this:
{
"/web/assets/js/index.js": "/web/assets/js/index.js?id=5e702572675a6cab4dfa",
"/web/assets/css/style.css": "/web/assets/css/style.css?id=1f39aea0608bf0bfd36c",
"/web/assets/js/index.es5.js": "/web/assets/js/index.es5.js?id=51f580901c35d8bfaed2"
}
Shouldn't the browser output look like this instead?
<link rel="stylesheet" href="/assets/css/style.css?id=1f39aea0608bf0bfd36c">
or even better if I can get it to output <link rel="stylesheet" href="/assets/css/style.1f39aea0608bf0bfd36c.css">
Here is my mix setup:
.setPublicPath(path.resolve('./'))
in the plugin settings I have set the Public Path to web
and the Assets path to Assets
Any ideas what i've missed?
Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.