I'm new to angular and was trying to implement something with W3 CSS. I was trying to add this css to my project. Below are the steps I have followed
Ran npm install --save w3-css in my project directory
Added node_modules/w3-css/w3.css in angular.json
"styles": [
"src/styles.css",
"node_modules/w3-css/w3.css"
],
After that I tried adding css classes to my component html file
<div class="w3-container w3-border w3-large">
<div class="w3-left-align"><p>Left aligned text.</p></div>
<div class="w3-right-align"><p>Right aligned text.</p></div>
</div>
But I couldn't see any class added.
Note: node_modules folder and angular json are in same directory.
import your css in style.css file.
#import "../node_modules/w3-css/w3.css";
Related
How to enable Official Tailwind Plugins while using astrojs/tailwind?
I have installed the typography plugin, restarted the server, and refreshed the browser. But I still have a small H1 heading.
npm install -D #tailwindcss/typography ➡
Then I've added require('#tailwindcss/typography') to my tailwind.config.js
My package.json is ...
"devDependencies": {
"#astrojs/tailwind": "^0.2.5",
"#tailwindcss/typography": "^0.5.4",
Yes, using #astro/tailwind with official tailwind plugins is possible.
My mistake was to use H1 tags without prose class.
I did not use a top div with prose class. After adding prose class it worked.
<div class="prose prose-slate mx-auto">
<h1>Your Header</h1>
</div>
Is There any difference to import to an Angular project a CSS lib (eg bootstrap) considering the options below:
Angular.json (npm)
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
Angular.json (CSS file locally)
"styles": [
"assets/lib/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
styles.scss (CSS file locally)
#import "assets/lib/bootstrap/css/bootstrap.min.css";
I suggest the first solution, because:
All three will end up in main CSS bundle
But 2. and 3. will also have original bootstrap inside assets. Even though it's used in bundle, it won't be removed from assets - which are a part of a build as it is.
Also, if you update Bootstrap it's way easier doing so by NPM.
I want to use PrimeNG's FlexGrid and tried to simply copy the example:
<div class="p-grid">
<div class="p-col">1</div>
<div class="p-col">2</div>
<div class="p-col">3</div>
</div>
which was supposed to output the numbers 1 2 3 next to each other. Sadly it does not, but just output:
1
2
3
I am able to use PrimeNG's Button-styles. Yet, I ensured I imported the css-files mentioned in the Get-Started Guide. In my app.module.ts it says:
"styles": [
"src/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
so these seem to be there. What did I do wrong?
You need to install the primeflex package.
npm i primeflex
Then add the following to the styles array in your angular.json file.
node_modules/primeflex/primeflex.css
Things should work as expected afterward.
You should run:
npm install primeflex --save
And add primeflex.css into your application
Inside angular.json file:
"styles": [
"node_modules/primeflex/primeflex.css"
],
After that run the app again and check if css class properties are loading inside the app like below:
I am integrating Hypertrack in my angular 5 app as per
https://github.com/hypertrack/angular-dashboard-demo
As hypertrack css is external i have to include it in style URL or angular-cli.json style
.angular-cli.json
"styles": [
"../node_modules/ht-angular/src/styles/bulma.scss",
"../node_modules/ht-angular/src/styles/global.scss",
"../node_modules/ht-angular/src/styles/placeholder.scss",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css"
],
I have left styles.css i case of any overrrides.
If i include these css here my project css gets affected.
dashboard.component.ts
styleUrls: [
'../../../../node_modules/ht-angular/src/styles/bulma.scss',
'../../../../node_modules/ht-angular/src/styles/global.scss',
'../../../../node_modules/ht-angular/src/styles/placeholder.scss',
'./dashboard.component.css',
]
})
If i include css here there is no change.
How can i import external css without changes in my project?
Edit 1:
I have created a git repo other than my project.
https://github.com/rgnrw/hypertrack_css_issue.git
Now i am unable to add bootstrap into this
In my app, I have such folder structure for styles
styles
head
main
Head folder contains styles which supposed to be in <style> tag to fast render first screen.
The main folder contains styles which supposed to be compiled into style.css.
How can I setup web pack sass-loader to do that?
In your loaders in your webpack config add:
{
test: /\.scss$/,
loader: 'style!css?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!sass'
}
Then for head and main you can name them with the scss extension and
import them like this (in your JS file)
import head from './head.scss'
import '!style!css?sass!<path-to-your-main>main.scss'
Then you can use it in your JSX like this:
<p className={head.myHeaderStyle}>Some text</p>