I'm starting to develop an web app in Angular using the Angular Material library for the interface. But I'm getting an error when trying to import a prebuilt theme. In order to import it, I added <link rel="stylesheet" href="../node_modules/#angular/material/prebuilt-themes/indigo-pink.css"> to my index.html file but when i run ng serve I cannot get the file.
If you are using angular-cli follow their steps for including Angular-Material.
Ensure you have the below imports in src/styles.css
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
#import '~https://fonts.googleapis.com/icon?family=Material+Icons';
It's slightly different to what angular-material suggest on their own Getting Started site but it worked for me.
Check that your path is correct. I had the same problem and I fixed the path:
Mine is
<link rel="stylesheet" href="lib/#angular/material/core/theming/prebuilt/indigo-pink.css">
If you don't find any solution just add angular material again. It won't affect your code but add the CSS. Don't forget to re-start the angular server.
ng add #angular/material
Related
On the Laravel 8 project I've done the next commands:
composer require laravel/ui
php artisan ui bootstrap
npm install && npm run dev
And now I'm trying to add the new button with bootstrap classes to the dashboard page, generated by laravel/jetstream, but bootstrap styles were not applied. I've read, this package uses Tailwind UI, but I want to leave its style and to code whole project in Bootstrap.
Can you help me with how to say to Laravel mix to use Bootstrap files?
Thank you.
Yes. By default, Jetstream uses Tailwind CSS. But you are free to use other CSS frameworks as well. In your case all you have to do is install Bootstrap and include the CSS in your HTML. For example, you can include the Bootstrap CSS file from CDN your main application layout .blade.php file.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
I'm not sure if there would be class name conflicts with Tailwind CSS.
I have created a basic application using Create React App. I came across different methods to load link tags to HTML while surfing on the internet.
Currently, WebPack is creating link tags as:
<link href="styles.css" rel="stylesheet">
But I want link tags to be rendered in a different form such as:
<link rel="preload" href="styles.css" as="style">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
Is there any way I can achieve it?
If you built the project using create-react-app, then you won't find a customizable webpack.config.js (there's one, but it's handled by react-scripts).
According to Dan, they don't allow customization of plugins to minimize potential issues.
So, if you want to add a plugin to a react app that was bootstrapped with create-react-app. You'll have to run npm run eject and this will make all the configurations files available for manual customization.
Once you ejected the project, you can preload resources for Webpack using the preload-webpack-plugin. Details here
Basic example webpack.config.js:
plugins: [
new HtmlWebpackPlugin({
title: 'My Cool App',
template: './app/index.html'
}),
new PreloadWebpackPlugin()
]
That should preload the assets and dependencies automatically for you. Additional usage details here
I have a problem...
I have an Aurelia pplication where I would like to load styles from Index.html instead of app.html.
Why?
Because when the application starts, there is a slight timespan before styles are loaded where user can see unstyled application.
As I am loading all the styles in app.html, the main.js executes before, and it loads all the plugins that takes some time.
Is there a way to do this?
You just use a standard link element to link to the css file in index.html. This stylesheet will not be bundled with your application bundle, and it can't be as you need access to it before your bundle file(s) is/are parsed.
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
You can add a gulp task to copy this file at build time, as the Aurelia CLI is built on gulp tasks.
i'm new in Rails and in Rails 4 i have generated a controller Pages.
The generator process have created a
app/stylesheets/pages.css.scss
Inside this scss file i've inserted:
.center { text-align: center;}
When i launch the web app, in the html source code i found
<link href="/assets/pages.css?body=1" media="screen" rel="stylesheet">
but this css is empty and not applies style.
Anyone can help me?
Thanks
Everything looks good in your code. Maybe you precompiled your assets? How did you run your server?
Try doing rake assets:clean before rails server to clean any precompiled assets that may exist.
I am developing an application with Ruby on Rails, and I'm using bootstrap to upgrade my CSS.
My question is:
If I have the next URL link: link href="css/bootstrap.css" rel="stylesheet"
How can I redefine the URL to be a relative one, thus it will not break if I rearrange my
project's files?
I think that the best practice is to put the stylesheets in the following directory:
app/assets/stylesheets
And include it using:
stylesheet_link_tag 'name'
But if you are using Bootstrap I highly recommend to use a Gem (For example http://rubygems.org/gems/twitter-bootstrap-rails), that way it will handle automatically the stylesheets and javascripts of the framework.
Use rails assets pipeline. See this guide:
http://guides.rubyonrails.org/asset_pipeline.html