It appears that some nuget packages use CSS isolation which requires me to use the following in the main _Layout.cshtml file:
<link href="{APP_ASSEMBLY}.styles.css" rel="stylesheet" />
This doesn't work for me though. I've refaced it with the latest bootstrap using Sass. I don't want to use the bootstrap that comes with blazor. However, I would like to use the styles that are isolated from a nuget package that requires CSS isolation. Is there a way to do that or are we pegged into Blazor's CSS if we want to use styles from another 3rd party nuget package?
Thank you!
Related
I have a fairly basic Dojo 7 (Dojo 2) app built with the dojo-cli tool. Now I'd like to add FontAwesome icons to it. I have a Pro subscription so I have a zip file with various folders of css and web font files that I want to include in my project, then link to from index.html. I believe the Dojo build process uses webpack, and my knowledge of it is extremely limited.
I can link to fontawesome CDN free version in src/index.html easily, which works fine:
<!link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
The Dojo 2 tutorial at https://dojo.io/learn/building/static-assets says I can put static assets in the assets folder, so I extract the zipfile to assets/fontawesome-pro-5.15.3-web and try to link to it in src/index.html:
<link rel="stylesheet" href="assets/fontawesome-pro-5.15.3-web/css/all.min.css">
My intention is to use FontAwesome in the traditional way, not using CSS Modules.
<i class="fas fa-question-mark"></i>
The dojo build process emits a large amount of "copying file blah.css" as it copies assets content to output/dev/assets and I see the FontAwesome files in output/dev/assets/fontawesome-pro-5.15.3-web, however the build gives:
Html Webpack Plugin:
Error: Child compilation failed:
Module not found: Error: Can't resolve './assets/fontawesome-pro-5.15.3-web' i n '/home/username/go/projectname/src':
Error: Can't resolve './assets/fontawesome-pro-5.15.3-web' in '/home/username/go/projectname/src'
- compiler.js:79
[travesty]/[html-webpack-plugin]/lib/compiler.js:79:16
I notice that it's referencing relative to /home/username/go/projectname/src, and the original assets folder is one level above that in the source tree, so I also tried this relative path in src/index.html:
<link rel="stylesheet" href="../assets/fontawesome-pro-5.15.3-web/css/all.min.css">
But this fails differently:
Html Webpack Plugin:
Error: /home/username/go/projectname/src/index.html:97
module.exports = __webpack_public_path__ + "all.min.30RjDni8.css";
^
ReferenceError: __webpack_public_path__ is not defined
- index.html:97 Object../assets/fontawesome-pro-5.15.3-web/css/all.min.css
/home/username/go/projectname/src/index.html:97:18
I have very similar results creating an assets/simple.css file and linking to that with <link rel="stylesheet" href="assets/simple.css"> so this seems a generic problem with my understanding of webpack.
Should I be using the "static assets" approach with these FontAwesome files, and if so how do I fix this build situation, or should I be trying to use this third party CSS library as a CSS Module, and if so, how?
It may be to do with webpack's "publicPath" concept, see https://webpack.js.org/guides/public-path/ .. if so I'd presume I need to do something to my .dojorc to control the Dojo build's use of webpack.
Thanks to #agubler on the Dojo discord channel, the fix is apprently this simple:
<link rel="stylesheet" href="/assets/fontawesome-pro-5.15.3-web/css/all.min.css">
Builds and works fine. Feels dirty to use an absolute URL like that so if anyone has a more meaty, explanatory answer to give, I'd be happy to mark that as the Answer instead of this :)
Is it possible to specify the css rules for only the angular-bootstrap modules that I'm using in my application? For example I'm only using the dropdown, datepicker and tooltip modules from angular bootstrap. However the entire bootstrap css file is required for these three modules. I'm not using bootstraps css in the rest of my application so I think importing the entire css file is overkill.
Webpack has a built in treeshaking function, which will be the easiest option if your project is already done or way ahead in development.
I have also found this treeshaking that manually compiles Bootstrap and uses Gulp to do the treeshaking in the mean time. I found it to be way harder and possibly outputing the same result, but make yourself comfortable.
I am trying to build a new design on an old system that is using DOJO, eventually we are going to move to AJAX to handle the data calls. Is there a default or minified CSS file so I don't have to use their themes? (i.e. Claro, which is the theme that was and still is applied)
It says you can make custom themes, but there has to be a bare bones version out there somewhere.
Thanks for your time.
The bare minium CSS is available in dijit.css
(you can see the file on the CDN: https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/dijit.css)
As dojo team says about this file :
Essential styles that themes can inherit.
In other words, works but doesn't look great.
So be aware it will be ugly!
But you can build your own theme starting from that.
dojo comes with out of the box the following themes:
Claro
Tundra
Soria
Nihilo
There is no really a default CSS a part of the CSS which is included in on of the listed theme. But as ben point out in his answer, there is a dijit.css which is a very essential base of CSS which other themes can in-heritage from.
You can apply them adding the following in your HTML file:
<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" />
<body class="claro">
Or you can use a CDN, example for claro (just change the name for css file in order to get a different theme):
https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css
The CDN version is an unique file and easy to include in your app but it is not minified.
If you need to have a minified version, you could use the dojo build to compact all your project files and included CSS for your theme minified.
More info here:
https://dojotoolkit.org/reference-guide/1.10/dijit/themes.html#id10
I've just downloaded IntelliJ IDEA 15 and am having issues with CSS class autocomplete from linked stylesheets. An example is when I link Bootstrap's stylesheet in the header as shown below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
The CSS classes don't autocomplete. The only way I've been able to achieve this is by actually attaching the stylesheet within my project. On the contrary, my JavaScript linked assets show correctly and can also be referenced within the project. I have downloaded most all of the necessary plugins including LiveEdit, Emmet, CSS-x-fire, and all other necessary tools.
If anyone can help me with this, it would be greatly appreciated. This software seems to be very robust and I'd like to continue using the IntelliJ product suite.
Consider to remove Web facet from your project module. (Open the project structure dialog) It helped me in similar situation.
I have no problem implementing a solution in my pom.xml using the samaxes plugin to minify and generate my required example.min.css file, is there script, how can I keep the development environment utilizing the CSS files on the fly without greatly changing the CSS source files?
I have the following code in my xhtml doc:
.
.
<link type="text/css" rel="stylesheet"
href="/assets/css/forms.css"/>
<link type="text/css" rel="stylesheet"
href="/assets/css/content.css"/>
<link type="text/css" rel="stylesheet"
href="/assets/css/images.css"/>
.
.
My pom creates an example.min.css and saves it in the same location using samaxes beautifully. I want to use this in my page but only in production...I want to be able to keep up with development on the fly on these various files but when I do the maven compile, it generates the example.min.css file from this and I intend on using this instead in production. There's tons of great answers saying which plugins to use to optimize and minify my css and js, I just need to know if there's a best-practice out there to point to them without bringing in another plugin like wr04J or is there some js I can implement that can build a conditional stylesheet statement on the fly if I use a param or something?
Originally I was using the concept of applying a rendered attribute to a ui:fragment tag that would render one way or another depending on a bean property that checked for the existence of the Maven debug property but this generated way too much overhead and just seemed like a bad hack just to get it to work. I need a better, simpler idea.
With the current version of Minify Maven Plugin you have to do something like this:
if productionEnvironment
<script src="js/bundle.min.js"/>
else
<script src="js/bundle.js"/>
end
It remains easy enough to debug and you only have to define your source files once (in the pom).
This will, however, be fixed in a future version of the plugin. Source Maps might soon become a reality and I'm planning to add support for it very soon.