I have a question about how to solve the following situation:
In my sass-files I use absolute path variables in my main include files, e.g. fonts are located in /assets/fonts/... and icons are located in /assets/icons/... and so on. Now these paths are obviously working only when the domain is in root.
The environment I wish my application to run on has a different folder structure which goes a few levels deep.
Here is an example of the file structure in my development environment:
/root
assets
icons
...
home
home.scss
page1
module
module.scss
Here is an example of the file structure in the new environment:
/root
various
subfolders
assets
icons
...
css
home
home.css
page1
module
module.css
As can be seen: The compiled CSS gets created in subfolders which can become quite deep, i.e. like 8 stories deep. The root declaration in my css will no longer work because of the new tree structure.
My options are as follows:
adjust my sass so that at all paths are relative (don't like to do that, will make my sass more complicated, everything seems to be good the way it is)
adjust my .htaccess so that this is covered (don't like that either, have to adjust everytime I switch the environment, seems "hacky")
create/use a gulp task that fixes my compiled css files so that the relative paths are added to all findings of url("/assets
I have searched quite a lot, looked into thread2, gulp-tap and gulp-replace. But somehow I can't quite get it right. For instance: The obvious solution, gulp-replace, is not working as I need it to because I need to get information about the file that is currently in the pipe (to get its file.path and thus find out how many stories the file has climb up to reach the assets folder).
Does anyone has ever done this? Or maybe has an idea how to solve this?
Alright, solved it myself. I have created a gulp-plugin for this:
https://www.npmjs.com/package/gulp-css-adjust-url-path
Related
i have a folder filled with svg's (path: src/assets/icons).
The css function url() is implemented like this:
url("/assets/icons/CheckSmall.svg");
It finds the svg data, when I run ng serve.
But when I build my Project, it cant find the svg data. Although it exists in the folder dist/myApp/assets/icons/CheckSmall.svg
I have read through many forums and discussions and tested a few things (One of many discussions).
For example i used different pathing "strategies":
1. url("^assets/icons/CheckSmall.svg")
2. url("~/assets/icons/CheckSmall.svg")
For number (1) it seems like it is not a supported feature in Angular, thats why i dont want to use it. And for (2) it copies my Assets and puts them into the folder dist/myApp.
Is there a viable(supported or documented) alternative? Or can I somehow adjust the angular.json.
Try using the following syntax:
background-image: url('../../assets/icons/<file-name>')
Where the route is relative to the css file
If you're setting non-default baseHref or deployUrl flags as part of the build that can also affect it
Try using that approach in styles.scss or in the relevant component, without the scss variable. The relative path won't be correct when the scss variable is used in different folders
I've built a library that will be used by several Angular applications (multiple teams and no monorepo). This library includes a scss-theme. This theme uses two SVG-files. However, I can't get it to work. The path is always incorrect.
My theme scss:
.test::before {
content: url('/test.svg');
}
I've written a Schematic that can be used by the library consumers to store the images inside a subdirectory of the assets folder of the application (e.g. src/assets/test-path). The Schematic does work as expected.
It does work when I add the following style inside the client's scss:
#import "test-company/test-lib/theme";
.a-client-test::before {
// This is just an example and assumes that the test image is located at this path.
background-image: url('../../assets/test-path/test.svg');
}
But as soon as I remove the line above (that actually uses the image from the assets folder and is not required at all). The path won't work anymore.
I've tested the following paths inside the library: ./test.svg, ~/test.svg, /test.svg. Only the latter does work but only with additional styles like the one above (that wouldn't be used) on app side. That's something I want to avoid as maybe we provide 50 icons on the library-side and it would be tedious to add these classes only to use the assets.
Some additional information:
I've added node_modules to the predecessor options in angular.json.
All other styles are working correctly. Only the image doesn't work.
I know that I can use ccsUrl: "inline" option inside the ng-package.json. However, I think this option only works (as far as I know) on styles that are used by components. But I actually copy the theme styles over after the build process. Additionally, the number of icons that are used inline shouldn't be too big, otherwise, the bundle size will increase and is therefore not an option for me.
I also don't know what is best practice for a scenario like that. I just couldn't figure out a proper way so far. But I assume writing a Schematic that copies over files is also not the best approach. Maybe there is a better way (e.g. a way to reference assets from the library but keep in mind I have the styles inside my library and the path is, therefore, complicated to figure out for all modules).
Just to make it clear again: My library has a scss file that uses an image. That image path is clear at the built time but doesn't work when used by an app. I can copy over the images, but that only helps when those images are used by the app somewhere in the styles. Then the path /image.svg works. The image as well as the scss that makes use of it are provided by my application.
Thanks for your help!
A detailed question about organizing content for blogdown/Hugo properly.
Built two websites with blogdown/Hugo, deployed via Netlify. One is simple and is easy to update, the second starts to become a mess because of my failure to organize content properly.
Basically, as I understand, we have two main folders /content and /public.
I am developing everything in /content.
The current structure of /content looks like this.
Any folder in /content like /content/team or /content/post has the same structure:
rmd files
html files
/img folder, where I store images
Example:
The problem starts at /public folder, it became a mess.
In my more simple web-site everything updates automatically as soon as I save my work and do blogdown::serve_site(). Here it is not.
For example, the same /team folder became a mess and looks like this.
Here I have .html index file, some other folders, which I did not create. I created public/team/images though, trying to understand where to locate the file.
The main problem that in this folder /public/team there is another folder /public/team/team (not sure why), where my index file is updated, when I update the code. As a result, instead of automatic update of the whole web-site content, I am forced to move .html index file from /public/team/team to /public/team manually, which sucks. Basically it forces me to have a separate index .html index file for each web-site tab, otherwise, the website has different views, when I switch tabs.
I obviously googled how to fixed this, but I found these Hugo content guideline tips not very intuitive for my level of expertise of working with blogdown/Hugo.
Thanks!
So, I been practicing less and it was working fine until I created a new project in drupal and wanted to use less and bootstrap. Drupal has a lot of folders and so my css and less folders were really down down down I mean, inside themes -> mythemes -> another folder -> css & less folders.
So, I decided to run a small test and yes! less wasn't working if I move the css and less folders inside another folder.
For example: this wouldn't work:
But this, will work:
I also tried to play around with this session by changing the "${web.root}/files" many times but it didn't work either:
Please help. I really want to use NetBeans for my project.
I'm using NetBeans 8.1
Yes! I solved the issue.
So, I was typing the path in the Compiler Options by adding the ${web.root}/files and this wasn't working. So, the right way to do it is by typing the file names in the Watch section:
change /less and /css to folder name/less and folder name/css
Just like I did here:
And, in my Drupal project I added: themes/mytheme/bootstrap_custom/less & themes/mytheme/bootstrap_custom/css
I hope this help others!
NOTE:
MAC users & NetBeans 8.1
I will give as detailed of an explanation as possible...
The directory where the stylesheets are located looks like this:
As is required with the newest version of Meteor, I renamed each file in the sub folders with the .import.less extension.
To import the less files, I added the #import designations to the files at root of the folder. For example, bootstrap.less looks like this:
However, the stylesheets are not importing correctly to client, so I must have done something wrong here. Not sure what it is, as I've tried everything I can think of. If someone can point me in the right direction, I would greatly appreciate it.