Set relative path folder in Svelte build
When I build my svelte app with the command npm run build, it's export the links like this:
<script type="module" crossorigin src="/assets/index-54c7d896.js"></script>
<link rel="stylesheet" href="/assets/index-d3d038e5.css">
More accurately it call to the root localhost/assets...
// src="/assets/index-54c7d896.js"
// href="/assets/index-d3d038e5.css"
And I get this:
Error from the navigator
From here:
where I want use the svelte app
And easy solution is using a relative path to:
// from "/assets/..." to "./assets/..."
src="./assets/index-54c7d896.js"
href="./assets/index-d3d038e5.css"
But the thing is I can't do that inside javascript and css files.
These still use an absolute path.
So this is what happens:
when a css file call other files using absolute path
I mean I could dig into a compiled file but it's not efficient
I tried change manually the paths on each file but it's a lot of work each time than I have to compile.
I'm using a hosting with php so I tried using .htaccess but it's hard too.
I am expecting this to be configurable from svelte.
I really love ❤️ this framework, thanks in advance for your help.
Related
i have a question.
Im working on a Project and i finished the Logic Part. So this was my first Project with Django and Web in generell. And my .html files are really really bad! So, now i want to change this. Work with a new Template and rework this a bit.
The first "base.html" was from W3Schools and now i want to use a bootstrap Theme. The Question is, how can i import the Files?
So i know that i have to put css,js Files into my static Folder and then import them into my base.html.
The Thing now is, that i have much Folders and Files. I have a css, img, js, scss and vendor Folder and some Files like package.json, gulpfile.js and stuff like that.
In these Folders are files like .css or .min.css, .js and .min.js, much scss Files and in the Vendor File are even more Folders with Files!
So the question now is, how can i import this good? That i dont destroy anything, which File should be in css, js and ?scss? dont know if i need a file for this in django! And how can i import them correct? Maybe anyone has an Example?
Would be really nice if someone can help me a bit with this!
Thanks!
For now, don't use any of those downloaded files, and use the hosted versions - it will be simpler. From Bootstrap's introduction:
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
And:
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
Note, you might not need the popper.min.js - read the instructions on that page.
Once you get that working, you could replace them with local files if you want. In the downloaded Bootstrap directory, they'll be in dist/css/ and dist/js/. You'll also need to download jQuery (or keep linking to it remotely).
I am not able to locate my external javascript and css files when I ctrl click their path string.
My html template path is 'bodhitree-flipped/concept/templates/concept/content_developer.html'. And my external video.js file path is 'bodhitree-flipped/video/static/video-js/video.js'.
Any Idea how I make pycharm to locate my js files? I know the solution for this is to run python manage.py collectstatic command which will copy all my asset files to /staticfiles folder but I don't want to do it as it will increase the size of my project by duplicating all the static files.
I tried rebuiding the file index with option under File->invalidate caches/Restart... but unfortunately this also doesn't work.
This is how my project structure look like.
click on the file to see code in settings.py
Any help is deeply appreciated.
I have just changed the python template language from jinja to Django (settings->languages and framework->python template languages)and then invalidated the file cache. It worked.
I have a project that I would like to use foundation 5 with. I have been through the steps of creating a new foundation project using the CLI but I don't like it. There is too many files and the structure does not match what I want. So...
I am intending to add only the required files to my project and use compass to compile all the css.
I have noticed in the project created on the CLI a few things that confuse me and would like some help in clearing them up.
In the project created on the CLI there are two _settings.scss files one under the foundation directory in bower_components and one in MY_PROJECT\scss. I'm assuming that because of this add_import_path "bower_components/foundation/scss" line in the config.rb, which of those files has preference?
Why does MY_PROJECT/stylesheets not have normalize.css (or foundation.css) in it? And how are they not there? (in my custom setup they are being generated, albeit in subdirectories of stylesheets, also the foundation.css that is being generated for me has no settings changes applied so I guess it shouldn't be being generated)
If you take a look inside \bower_components\foundation\scss you'll see the file foundation.scss. That file imports all the stylesheets for all the additional components that come in the Foundation 5 "package." In your root scss directory, the app.scss is what compiles the SASS into \stylesheets\app.css. So rather than this:
#import "foundation";
Uncomment the individual components you'll be using. Something like this:
#import
//"foundation/components/accordion",
//"foundation/components/alert-boxes",
"foundation/components/block-grid",
//"foundation/components/breadcrumbs",
//"foundation/components/button-groups",
//"foundation/components/buttons",
"foundation/components/clearing",
"foundation/components/dropdown",
//"foundation/components/dropdown-buttons",
//"foundation/components/flex-video",
"foundation/components/forms",
"foundation/components/grid",
//"foundation/components/inline-lists",
//"foundation/components/joyride",
//"foundation/components/keystrokes",
//"foundation/components/labels",
//"foundation/components/magellan",
//"foundation/components/orbit",
//"foundation/components/pagination",
//"foundation/components/panels",
//"foundation/components/pricing-tables",
//"foundation/components/progress-bars",
"foundation/components/reveal",
"foundation/components/side-nav",
//"foundation/components/split-buttons",
"foundation/components/sub-nav",
//"foundation/components/switches",
"foundation/components/tables",
//"foundation/components/tabs",
//"foundation/components/thumbs",
//"foundation/components/tooltips",
"foundation/components/top-bar",
"foundation/components/type",
"foundation/components/offcanvas",
"foundation/components/visibility";
If you'd like to streamline your file structure, I would suggest you remove any scss files from the \bower_components\foundation\scss\foundation\components directory that you will not use. Same with the js directory. You don't actually need to modify anything in the bower_components directory to get everything to work. Not entirely sure why it's all contained within bower_components, but I imagine it's got something to do with being able to update the core components later with future releases.
Someone else could probably give a more educated answer.
p.s. - make sure to compass watch in your CLI to see any of those changes made to your SASS files.
I am currently importing a css file from my bower_components folder in an ember-cli application, e.g.:
app.import('bower_components/toastr/toastr.min.css');
I'd like to modify the CSS in that file before it gets concatenated into vendor.css. How can I do a find a replace so that it ends up in vendor.css?
At this point, I've explored broccoli-replace a bit, but seems that that would only work if I wanted to have toastr.min built as a separate file in my dist folder. I'm not 100% understanding broccoli at the moment, so this could be way off.
I'm trying to build Dojo 1.6.1.
I ran C:\somepath\dojo-release-1.6.1-src\dojo-release-1.6.1-src\util\buildscripts>build.bat action=release htmlFiles="C:\path\test.jsp"
Test.jsp contained a few js files. One of which contained all the require statements.
Now I have a release\dojo folder, but if I put these contents into my original source location, it will break my test.jsp's <script> tags.
I found some documentation of the build process: http://dojotoolkit.org/documentation/tutorials/1.6/build/
I could not find documentation on how to DEPLOY the build. Is the deploy simply a copy paste but the problem was that my build didn't work properly?
A Dojo custom build is intended to serve as a drop-in replacement for a standard full Dojo distribution as you would include via:
<script type='text/javascript' src='/path/to/dojo/dojo/dojo.js'></script>
Typically deployment is simply changing that to:
<script type='text/javascript' src='/path/to/your-custom-dojo/dojo/dojo.js'></script>
If your test.jsp file does things like dojo.require() with inline <script> tags, they should continue working correctly.