Load css on angular application based on subdomain - css

Todo :
css file based on subdomain loaded. For e.g: I have abc.css, xyz.css and these css should be loaded based on subdomains like if abc then abc.css must be loaded and so on.
Tried Cases :
Dynamically load css from angular-cli.json (Couldn't found a way to
load dynamically)
Loading css on index.html (MiME type issue encountered)
Use style-loader on app init e.g require("style-loader!./style.css");
Used version : Angular 4.4.6 version.
Can anyone help me on this?
I am open to all suggestions, please suggest.
Thank You.

Try this:
In the HTML template:
<link rel="stylesheet" [href]="getCssUrl()">
In the component.ts:
constructor (private sanitizer: DomSanitizer) {}
getCssUrl() {
// Implement your code to return CSS url based on sub-domain
const cssURL = xxx;
return sanitizer.bypassSecurityTrustResourceUrl(cssUrl);
}

Related

How do I structure my Firebase Product to render html and return the result with styling and JS?

I've recently started a firebase project using express where I generate html using the following code and return it to the user which is working:
response.render("index", { Element: responseValue.data().Url, Contents: responseValue.data().Contents});
I am trying to add styling and JS in the public folder since they will be static and don't change but the issue is my .hbs file can't access the JS in the public folder no matter what file path I use. How do I fix this?

How to dynamically load a css file in a react function component?

In my react application, in a component, I need to load a separate css file dynamically based on a condition and the css styles should get applied.
The condition here is in the url if I have a query string say "customStyleName" with some value , then this dynamic css file should get loaded. I am using css modules and loading a sass file for this component. But, when this query string "customStyleName" present in the url, this dynamic css file should be loaded and the styles would be overrides
I could manage to check the condition if customStyleName query string present in the url and load the css file using require() (dynamic imports didn't work here) and the styles get applied in my local. It's working fine in my local.
localhost:3000/ss/ext/onboarding?customStyleName='ss'
useEffect(() => {
const query = new URLSearchParams(window.location.search);
const customStyleName = query.get("customStyleName");
if (customStyleName) {
console.log("apply customStyleName");
require("./customStyles.css");
} else {
console.log("customStyleName empty");
return;
}
}, []);
But, in dev or other environments, it is loading the dynamic css file even though the necessary query string not present in the url. My react application is created using create-react-app.
when I checked in the developer tools, the css file is getting loaded in dev environments. I am confused why the same thing working perfectly in my local and its not in other environments. Any help would be appreciated. Thanks!

Path issue that makes a CSS file not read (React App)

I have a file named custom.css which override materialize.css,
It's imported in public/index.html with this line :
<link rel="stylesheet" href="custom.css" />
On a route like /account, it works fine, in the browser I can see the http://localhost:3000/custom.css loaded,
But on a route like /user/:username, the CSS file becomes http://localhost:3000/user/custom.css so it doesn't work,
I did my project with create-react-app, and I'm not using a bundler (maybe there's one with the boilerplate),
I don't even know where to start to resolve this issue,
I suppose you use such import path:
<link rel="stylesheet" type="text/css" href="custom.css">
You have to replace path with :
href="/custom.css"

node js - refused to apply css (MIME type text/html)

I am trying to implement my css in my html with nodeJS, Express and socket.io but i got the error: 'Refused to apply style from 'http://localhost:8000/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.'
Note: I only got the error displaying the css files when i run in my localhost:8000 (Node.js) but not in my normal index.html file.
here is my config in index.js
var app = express()
.use(SocketIOFileUpload.router)
.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
})
here is my files structure
style
style.css
images
lib
node_modules
index.html
appConfig.js
index.js
So far, what i did is:
i change my css script from
<link rel="stylesheet" type="text/css" href="style/style.css"/> into type="text/html" : it did remove the error but my css still have not applied in the html
checked the spelling of my css file name: no issue on the name or the css path
i have search all over the internet, but nothing helps. It might be i configured it wrongly since i am not really familiar with the config, but i don't have any ideas. Any helps or hints area really helpful. Thanks!
Can you list your directory structure here? The initial error is that you wanted to apply css to your html file but the css file when returned by node had a mine type of html. When applying style if you manually set the mine time to html for a css file, it’s certainly not going to work. What is your css file name and path? A speculation I have is that your app is not configured to serve the css file. When asked for the css file, the server is probably responding with a 404 which is a mime type of html, hence the error. Look at your nose console logs when you load the page for a 404 for the css. You’ll have to show us where/how you are serving static files for us to help any further.
Yep you have the style.css inside of style, you need to set the static directory accordingly. Here is a reference
app.use(express.static('public'))
taken from https://expressjs.com/en/starter/static-files.html
In your case you can wrap your images and styles folder under public and then use the given example. In production however, you will want to serve static files using a reverse proxy like Nginx.
my fix was
app.use(express.static(__dirname + '/'));

How to handle CSS with meteor?

I am building a test app to learn how to organize multiple files with METEOR.
I have a head.html and inside I have the following link to my custom CSS:
<!-- Custom CSS -->
<link type="text/css" rel="stylesheet" href="/stylesheets/globals/style.css"/>
Very normal, Yet I have trouble to make that working.
Here is my app directory:
-app folder
---client
-----head.html
-----index.html
-----stylesheets
-------globals
---------style.css
I know it seems to be a very basic question but I can not figure it out.
Basically you have 2 ways of inserting CSS in a Meteor project :
Using the Meteor build tool to automatically concatenate and minify all your CSS files living in the client/ directory : in this case you don't need to import your stylesheets using a link tag in the head. This is perfect for vital CSS files that your app should load when started.
Example : put your CSS file under client/stylesheets/globals/style.css and that's it, no need to import it, it's automatically injected in your project by Meteor.
Using the classic way of importing stylesheets in a web application : you can put your CSS files inside the public/ directory and they will be served by your app server. In this case the Meteor build process will be skipped so files won't be concatenated together nor minified. Use this method when you want to lazy load big CSS files only needed in a subpart of your app (for example admin section styling).
Example : put your minified CSS file under public/stylesheets/admin/style.css, and use something like iron:router to load the CSS file when hitting the admin route.
Router.route("/admin", {
// onRun hooks executed only once
onRun: function(){
// create a link taf holding a reference to our publicly served CSS file
var link=$("<link>",{
rel: "stylesheet",
href: "/stylesheets/admin/style.css"
});
// append to the head tag
$("head").append(link);
}
});

Resources