I have a ASP Core project and have added a bundleconfig.json to the project base. Within the bundleconfig.json I have added the following code for bootstrap.css
{
"outputFileName": "wwwroot/css/bundles/bootstrap.css",
"inputFiles": [
"wwwroot/css/Plugins/bootstrap/bootstrap.css"
]
},
When I build the project I can see the bootstrap.css file in the specified path within the project. I have placed the bootstrap.css file on my _Layout.cshtml view within the <head> tag.
<environment include="Development,Staging,Production">
<style src="/css/bundles/bootstrap.css" type="text/css"></style>
</environment>
When I load up my site none of the bootstrap css styling being applied. If I view the source using chrome dev tools I can see
<style src="/css/bundles/bootstrap.css" type="text/css"></style>
and when I click on it I can see all the correct css code is present in the file.
I have also installed the BundlerMinifier.Core nuget package and the Bundler & Minifier extension as I seen others suggest on other posts.
The syntax should be <link href="/css/bundles/bootstrap.css" rel="stylesheet">
Related
I'm just learning ASP.NET and I created the default Web App template in Visual Studio. There are some bootstrap.css files under wwwroot folder but even if I comment everything out it doesn't have any effect on how the website looks like.
For example in _Layout.cshtml the #RenderBody method is wrapped up in div class="container" but editing ".container" in the CSS files doesn't do anything. It's only when I delete the class name "container" in the div element something actually happens. So why editing these CSS files don't have any effect?
The browser is likely caching bootstrap.css because it is linked into the page. Try opening dev tools in your browser and telling it to dump the cache and hard reload (if you are using chrome/edge, for example).
Some devs get around this by only opening their site in private mode or with debug/dev flags. FireFox even makes a developer edition of their browser too.
I think running your site using "dotnet watch" might also fix the issue.
Check your layout, what .css file you used. You can see it in the layout or using F12 to see it in the network.
Below is two options:
1.If you used the bootstrap.min.css in your layout
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
You need comment .container in your bootstrap.min.css
2.If you used bootstrap.css in your layout
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
You need comment .container in your bootstrap.css
The structure is like below:
I have a fairly simple webpack project - built using the Webpack guide. See https://github.com/timburgess/webpack-postcss-tailwind
There is a style.css in the src directory but there is no .css being added to the /dist directory on build.
Reading further, any css should be added as an inline style and that's not occuring.
Resolved with https://github.com/webpack-contrib/mini-css-extract-plugin per Richards answer.
Webpack will bundle the css files referenced via import statements in your source javascript files into the output javascript file (bundle.js). You'll see the classes being applied to the webapp at runtime via inline <style> tags applied dynamically to the html.
Many developers do not think this behaviour appropriate and will use a special plugin to get webpack to produce seperate bundled .css files that you then reference in your html using the traditional (and caching friendly) <link rel="stylesheet" type="text/css" href="bundle.css"> tag. See:
https://github.com/webpack-contrib/mini-css-extract-plugin
I'm new in Angular and I have created an Angular 2 application using Visual Studio 2017 Angular Spa template.
I want to add Angular Material to my project and in its guide said that I have to add this:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
But I don't know where.
I have add it inside app.component.css file:
#import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
But I get a warning:
(CssLint) #import prevents parallel downloads, use instead.
I have found this answer, but I don't think it applies to my problem.
Where can I add styles or fonts to use them globally?
Since you're new to Angular, I can only advise you to follow their guidelines.
And one of their guidelines is to create a project using the Angular CLI.
Once you've created the project, if you want to add Angular Material, follow their guide too.
About your font issue : you're not trying to import a style, you're trying to import a font. Fonts goes in the index.html page, in the head. #Gregor placed it well.
In your Angular project folder you should got to src/app/. In the app-folder you can see index.html and styles.css. So this two files are global. You can add font styles in index.html od via #import in styles.css.
In case of your question you should have an index.html in your wwwroot folder. In this example the author does so.
For example index.html:
<html>
<head>
....
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
...
</head>
<body>
...
</body>
</html>
Answer that you posted actually applies to you, but firstly you should download this font and copy it to your project dir so it can be static asset. Then you can import this file using webpack plugin (look here). I'm not familiar with project generated by Visual Studio you can just simply add your link tag to index.html inside head tag.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
...
</html>
Only add our CSS files to the nonTreeShakableModules array of the webpack.config.vendor.js, e.g. my webpack.config.vendor is like
const nonTreeShakableModules = [
'bootstrap-css-only/css/bootstrap.css',
'font-awesome/css/font-awesome.css',
'es6-promise',
'es6-shim',
'event-source-polyfill'
];
That's because of you have (in the same webpack.config.vendor)
const clientBundleConfig = merge(sharedConfig, {
entry: {
vendor: isDevBuild ? allModules : nonTreeShakableModules
},
}
In case of a font I don't know if the best solucion it's simply add a link in _layout.cshtml as #Gregorg say
I'm trying to use the angular2-busy library in an angular project created with the CLI, but am having an issue importing the stylesheet:
<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css">
The browser is telling me that it cannot find the file, even with the correct path. I also checked that the file exists, and it does. When I take out the rel="stylesheet" I don't get the error, but then the animations don't work.
Here is the package I am trying to use, if anyone is curious:
https://www.npmjs.com/package/angular2-busy
Angular CLI have it's own way to initialize your global css/js.
They are located in .angular-cli.json configuration
Locate "styles": and add your css there
Example :
"styles": [
"../node_modules/angular2-busy/build/style/busy.css",
"styles.css"
],
Hope that helps.
Basically there are three different ways to do that :-
By adding it to the "styles" array in angular-cli.json file as is shown by #penleychan in his answer.
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]
You can directly import the css file into styles.css file (or any other css file) that is included in "styles" array in angular-cli.json file by adding the #import statement at the top of that file.
#import "~bootstrap/dist/css/bootstrap.min.css";
Include the css file in index.html page by adding a link element.
<link rel="stylesheet" type="text/css"
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
You can find a more elaborated explanation and a few more alternatives at this link
How to Use Angular with Linked Cascading Style Sheets (CSS)
Always use LINKED CSSS rather than the compiled and embedded JavaScript memory version of CSS Google Angular uses. Why? Linked <link> external CSS is superior in every way to embedded CSS, mainly because linked CSS is cached across thousands of page views, visits, and users online, saving you huge bandwidth values with increased CSS rendering speed in the browser, while implementing simpler, faster CSS management, overall.
HOW TO FIX ANGULAR FOR LINKED CSS
In angular.json delete all the references to CSS files under "styles". It should look like this now:
"styles": [],
Move your CSS files to the"src" folder inside your project, then add links <link> to your external CSS files inside index.html. Add in your link paths to your CSS file starting at the "src" folder and including the "styles" folder or any folder system you desire (see below). You can store your css wherever you want in your project now as long as those folders of files are under your "src" root folder. My physical CSS files in my project for the path below now sit under "src/styles". So the link path should just be my "styles" folder plus the file name:
<link href="styles/mystyles.css" rel="stylesheet" />
Any CSS files for bootstrap, font-awesome, etc. that you want in your project have to be manually copied from your "node_modules" folder in your project into a folder under your "src" folder, just like in the location used for the CSS file above in #2. Or, you can reference them from some fully qualified url online. If you want to create a link to them as above in "index.html", or import them into the html file directly (example below), that will also work. If you were importing them before from the "node_modules" folder that will not work as the Angular CLI or webpack resolved those paths by compiling your CSS imports into JavaScript. After you move those CSS files and link or import them from the src folder, they will not be compiled into Angular JavaScript now. When using #import, be sure to drop your bootstrap and font-awesome CSS files in the same "src/styles" folder as your main style sheet and import them into that stylesheet like this:
<style type="text/css">
#import "bootstrap.min.css";
#import "font-awesome.min.css";
</style>
In the same angular.json file above, under the "assets" JSON setting, add a reference to the location of your CSS files in #2 and #3 so the builder can copy them into your dist folder. Any CSS files linked or imported from that folder will get moved by the "dist" folder system when Angular is compiled. Note the new styles path at the bottom. If you have CSS in other folders you can add them here as well. This tells the builder to create the CSS directories in the "dist" folder Angular uses and copy all the CSS files inside them, so when you build for production your index.html links point to the right CSS files on the server:
"assets": [
"src/favicon.ico",
"src/assets",
"src/api",
"src/styles"
],
You now have a powerful set of link elements to all your CSS in the head of your index.html file and can edit them in the Angular project like you normally do, knowing they will work in both the Angular development test server and in your dist production copy. Your website will also benefit from browser caching of CSS one time in memory and permanent file caches.
It took me a day to dig through documentation and testing to figure out what should have been a natural part of any simple website API with linked CSS. I'm sorry Google Angular made this so convoluted. But this change works great!
This simply removes your CSS from the compile and build angular system that pushes all your CSS into a JavaScript file, which simply embedded your CSS into an inline style sheet block in the memory of your browser and head of your HTML page. Using your own linked CSS html tags is far superior and allows better caching and control of CSS cascade rules.
Good Luck!
Try
<link rel="stylesheet" href="node_modules/angular2-busy/build/style/busy.css" >
You are missing the self closing / at the end of your code. It's possible the browser is not fixing this for you.
<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css" />
Also removing rel="stylesheet" would definitely not fix the problem since the browser needs to know exactly what kind reference you are referring to.
If fixing the closing tag does not work then your path is wrong. You can also try adding a ../ to the beginning of your path. This will make it relative to the folder the site is in.
<link rel="stylesheet" href="../node_modules/angular2-busy/build/style/busy.css" />
I want to using in my service webjars bootstrap.
I added dependency
compile group: 'org.webjars', name: 'bootstrap', version: '4.0.0-alpha.6-1'
I register source
registry
.addResourceHandler("/webjars/**")
.addResourceLocations("/webjars/");
I using bootstrap css in thymeleaf
<link rel="stylesheet" th:href="#{webjars/bootstrap/4.0.0-alpha.6-1/css/bootstrap.min.css}">
And bootstrap does not work at all. No items. How this service did not see the bootstrap css file? In the project I use, for example, Spring Security. Could it have any effect? And is it worth the trouble of fixing it? What is the speed between a webjars file and such a plain css file in the 'resource' folder?
To add Bootstrap as webjar pls add the following to build.gradle:
dependencies {
...
compile 'org.webjars:bootstrap:4.1.3'
}
And attach it to html template:
<body>
<script src="/webjars/bootstrap/4.1.3/js"></script>
...
</body>
You can add bootstrap.min.css file like below:
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.4/css/bootstrap.min.css"
th:href="#{/webjars/bootstrap/3.3.4/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
A github example is given in this link: https://github.com/springframeworkguru/springbootwebapp
Full tutorial is here: https://springframework.guru/spring-boot-web-application-part-2-using-thymeleaf/