I've noticed that when working on a meteor application it will auto refresh the entire page when any stylesheets have changed. Is there a way to make it only refresh the stylesheet assets similar to how LiveReload works?
Also note that I'm using stylus for my stylesheets. Is that what's causing the full reload?
No, out-of-the-box Meteor will reload the entire app when it detects a file change of any type (whether html, css, or js). It doesn't matter if you're using stylus or not.
I imagine future iterations may take a page of out LiveReload for images and css files (so changing them does not cause a refresh), but for the time being the whole site will reload. In fact, this would probably be a fantastic pull request.
The current workaround I found is to use the "regular way" of adding css files:
Put your file myCss.css into the public folder "/public/myCss.css" so that it is not compiled by meteor
Add the following line to your html file:
<link rel="stylesheet" type="text/css" href="/myCss.css" />
Use a live editor such as Espresso or CSSEdit to change the myCss.css file.
Note that once you save the file, meteor will reload anyway. But in the following case:
- You are running meteor in production mode
- Your .css file is not in any folder contained into the meteor project (like you serve the .css file from somewhere else my yourself)
- Your file or folder is starting with a dot "." or ending with tilde "~", in this case, meteor will not reload those files if they did changed. Note that I never have been able to make this work with the ending tilde, moreover working with invisible files (starting with ".") is not very convenient. See here for ref.
Related
I'm experimenting with Vite, VueJS 3 and vite-plugin-singlefile for an app which is bundled to a single HTML file, and then served inside a sandboxed iframe through a parent site I don't have much control to change.
Specifically, the iframe runs sandboxed with <iframe src="someotherorigin/page.html" sandbox="allow-scripts allow-same-origin allow-forms">. My built HTML page references some external scripts via CDN (e.g. Bootstrap, etc), but the actual app code itself is inlined.
The app works fine with Vite's dev server and build+serve option. It's also fine when I preview in other tools... But in the target environment it seems like the main entrypoint script simply doesn't run. Nothing renders but also no error messages in console. I do get a couple of warnings about malformed CSP, but that's all:
Content Security Policy: Interpreting none as a hostname, not a keyword. If you intended this to be a keyword, use 'none' (wrapped in single quotes).
Content Security Policy: Interpreting https://none as a hostname, not a keyword. If you intended this to be a keyword, use 'none' (wrapped in single quotes).
This question got me curious so I tried manually editing the built index.html to change the inlined <script type="module">...</script> to <script>...</script> - And it works fine!
...But:
I can't make that change in the source index.html (Vite just ignores & refuses to bundle the TypeScript /src/main.ts source unless "module" is set)
I don't think there's an easy way to automate changing it in the build pipeline either (seems like it'd be messing around with custom Vite plugins)
I don't really understand what's wrong in the first place - why would type="module" cause the iframe not to run this Vue-generated script? Is there some other more proper fix?
I am currently working with gulp-less workflow with livereload feature of chrome and gulp-livereload is working fine.
When I am making any changes to file, livereload refreshes the css and unfortunately it is injecting livereload css instead of less files.
So I have to refresh the page to show the corresponding less file which is very time consuming and made no use of livereload.
It is totally nonsense to use livereload if I anyhow need to refresh the page to see the less sourcemap files?
Let's say I am generating custom.css file from all the less files but when I change into any partial files, livereload generates sourcemaps and updates custom.css as well in the file system but in browser what I see is only injected css.
See the below screenshot to get the exact issue that I am facing.Note that it also appends some version and port number also after injected css. E.g. css/custom.css?livereload=1577164609829 for my case.
What I am expecting to see on refresh is the corresponding less file in browser and not the injected css through the livereload.
Has anyone faced this issue before? If yes then please help me.
Note: Please don't advice using browser sync or any other instead of livereload.
Apologies if this explanation isn't super clear. I am new to VueJS and I will do my best to explain my predicament.
I am building an application that imports html from external files into a component using v-html. I achieved that without any problems. However, the html has a bunch of asset urls that start with a /. What I want to do is to ensure that every asset url that starts with a / has a baseURL placed in front of it, converting it from say '/some-folder/some-asset.jpg' to '../../static/some-folder/some-asset.jpg' automatically without me having to programmatically modify the url.
I have tried modifying settings in the configuration file index.js, namely by trying different urls in assetsSubDirectory and assetsPublicPath but without success.
This is an example of a node in the imported html:
<picture>
<source media="(min-width: 768px)"srcset="/media/3974/cover_tablet.jpg">
<img id="img_20921" src="/media/3973/cover-mobile.jpg" class="img-fluid">
</picture>
I am trying to change the src value of:
/media/3974/cover_tablet.jpg
to:
../../static/media/3974/cover_tablet.jpg
by setting a base URL in the vue configuration but it won't prepend ../../static to the url and therefore the app cannot find the relevant asset.
The only way I managed to get this to work is by using JQuery to look for "src:" strings in the imported html and then prepend the baseURL into the link. This isn't at all ideal though and what I really want to achieve is for any link that starts with a "/" to have the apps baseURL prepended to it automatically.
I am starting to wonder if it is even possible for urls in imported html to pick up the apps baseURL value?
I found a solution. I was using the webpack template for my project which proved to make this particular issue difficult to work out so I reset my project using the Vue CLI template instead, put all my assets in the public folder and all the links in my imported html were picked up immediately with no fuss and no messing around with webpack configuration.
I need to develop a plugin for Moodle, and i need to have some js and css files in plugin. But i have the next problem - how to work with them from installed plugin? Of course, i can hardcode their path via to moodle structure, but it's a very dirty and bad way. Also, i know that i can place all js and css code inline, but i think that it's a bad decision too. Is there a built-in way to serve assets from plugin? I tried to find it in documentations, but found nothing.
Thanks
I assume you want to know how to include CSS and JS files into your plugin.
You can include a JS file via the command:
$PAGE->requires->js( /relative/path/your_script.js');
You can then call a JS function once the page has been downloaded with the command:
$PAGE->requires->js_init_call ( your_JS_function_name, array_of_parameters_here, bool: on DOM ready);
For example:
$PAGE->requires->js_init_call('init', array($USER->lang), true);
Be sure to make the $PAGE available with global $PAGE;, first.
Your CSS file can be named styles.css and put into the root folder of your plugin. The file will be automatically read by the system and included. It will take precedence over (will overwrite the settings of) the system CSS files. After that you will have to reload the theme caches.
I came to notice that there is one folder called assets in the root folder.To know more about it,I went through this link.Now I want to know adding some css in these files is good or shall I add css to to the main.css file inside css folder.
The asset folder is automatically generated by Yii based upon your environment so best avoid putting your CSS, images etc inside here. It also best to not commit these folders and files into SVN as they are automatically generated and folder names will differ from your qa/staging/live site to your local site.
There are some good reasons to use Yii's assets.
it prevents naming conflicts in css and js files
it allows you to keep CSS and JS files under your document-root but outside of your web-root (for easier version control)
it allows to easily switch between sets of CSS & JS files, rather than having to deal with each file individually (suppose the system admin needs to revert back to a previous version).
it allows you to publish assets (images, JS & CS) to several websites hosted on the same server.
Please check here or there for more details.
Well, when i started my first Yii project, i also put my CSS and JS files in assets. It works but then i found that its not just the right way. Its better to make a separate directory for your CSS file(s). Also there are some auto generated files in assets, so to avoid mix-up with those and your i prefer to make it separate. Hope you got the point.