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
Related
It seems that the generated project already has lots of colour variables like --bs-body-bg. Dev.tools say it is in _root.scss, but that file does not seem to exist, and I suspect it is inside of bootstrap.in.css. Can I customise those existing colour variables?
It's coming from scss.
You should have other _XXX.scss. SCSS compiler will make a global CSS file for the whole project. Dev tools present you the origin _root.scss not the compiled CSS.
Find the big CSS file of your project, you will find your variables.
If you know scss and have access to the whole tree of scss and all the files, you can rebuild the global CSS in house.
Other way, you make another CSS file, you put it after the global CSS, and you override definition you need... Not the smartest, but if only some changes to do lot quicker.
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!
What I have is a large CSS file which was compiled from Sass. I have some of the original Sass files, but looking at the source map not all of them.
I'm able to compile the Sass that I do have into CSS, but of course some of the style rules are missing.
How can I reduce these two files into only the rules that are unique to the original? I would like to be able to do that so that I can include that CSS with the source Sass I have on hand to speed up future development.
I would do it like this:
take original CSS and convert it to Sass by changing extension to .scss
if original CSS is minifed use something like CSS Formatter to get readable code
name it something like legacy and import first in your master Sass file
use nanocss in your build process to dedupe duplicate styles (make sure discard-duplicates plugin is enabled)
optional: enable dedupe only for production build since it slows down CSS generation
drawbacks:
if changing properties on existing classes in Sass dedupe will not match against legacy and you end up with almost-duplicates - to prevent that, I would manually go into legacy to delete old classes when changing them in sass partials
Based on your input you should do following "backwards-engineering":
1) Compare you CSS files in a diff-program, e.g. diffchecker.com (let us call your files: file1.css and file2.css).
2) The diff-program will mark duplicate areas with color.
3) Decide which file to update and remove the duplicates, in that file.
Note!. This method will only solve if you have duplicated text blocks in your CSS files. It will not solve to "clean & improve" e.g. if you have spreadout "duplicate" information.
When Laravel Webpack/Mix executes and converts SASS to CSS, it changes the relative paths like url('../images/background.png'); to absolute paths like url('/images/background.png');.
Is it possible that the paths are not updated and kept as relative?
The reason is that the deployment could be in different folders on different servers so that the relative paths will work on all folder structures. E.g., it will work on http://www.example.com/ as well as http://www.example.com/subfolder/. But if an absolute path is used, then in the case of the subfolder, the CSS will not find the images and fonts.
Is there some other best practice to handle this situation?
From the docs:
By default, Laravel Mix and Webpack will find example.png, copy it to your public/images folder, and then rewrite the url() within your generated stylesheet. As such, your compiled CSS will be.
As useful as this feature may be, it's possible that your existing folder structure is already configured in a way you like. If this is the case, you may disable url() rewriting like so:
mix.sass('resources/assets/app/app.scss', 'public/css')
.options({
processCssUrls: false
});
https://laravel.com/docs/5.5/mix#working-with-stylesheets
I want my IDE to see Bootstrap files for CSS classes autocompletion and on-the-fly LESS compiling. But I don't want to store Bootstrap inside my project folder structure and copy libraries in each project. How can I make IDE know where is libs?
Some approaches I tried.
Using relative paths. #import '../../../../../Bootstrap 3/less/mixins'; does not look good. Moreover, despite import statement is correct (without red underlining), IDE does not "know" about imported mixins. When I just copy libraries, IDE "knows" about them.
Connect as JS libs. I see them in project files view. LESS syntax checker cannot locate them, no matter what path i specify. Import statement is underlined with red wavy line.
Now, I can use only copy and paste technique or use links (or directory junctions). I am not sure that this is correct way.
I tried this PhpStrom and PyCharm, but I suppose that WebStorm cannot resolve this problem too.
You can add a folder where your Bootstrap files are stored as additional content root to each of your projects (Settings/Directories, Add content root). See also WEB-7452