For example: I changed this line in my www/lib/ionic/css/ionic.css file:
background-color: #f39200;
But always that I run ionic lib update this line change to an older version:
background-color: #11c1f3;
Why?
Your ionic.css file is being overwritten when the ionic.scss file is compiled. Your directory should look as such:
...
resources/
scss/
ionic.app.scss
www/
css/
style.css
lib/
css/
ionic.css
scss/
ionic.scss
...
All you need to do is edit such styles inside of style.css. ionic.css is compiled straight from ionic.scss and therefore is overwritten every time you save. If you want to use pure CSS only then make sure to write all of your styles inside style.css.
If you want to use SASS then write your styles inside scss/ionic.app.scss and run gulp sass.
The index.html that is built at the beginning explains this to some extent:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
Related
I have a React app created using create-react-app which links to my CSS file as shown below in index.html file:
<link rel="stylesheet" href="../src/site.css"></link>
The site.css is implemented below:
body {
background-color: green;
height:100%;
width:100%;
}
When my app is run it does not apply styles to the body. I can see the css file is being downloaded.
The src directory is not served with create-react-app. You either need to move your CSS file to the public directory or import it from one of your JavaScript files.
Internally everything is bundled using Webpack with loaders that understand stylesheets, so the simplest way to handle this is to remove the link tag from your public/index.html file and instead add the following import to your src/index.js file:
import "./site.css";
Alternatively, if you really need to link to the stylesheet from your html file, you can move it to public/site.css and change your link tag to reference it:
<link rel="stylesheet" href="/site.css">
I saw similar posts on SO here and on GH here, but neither solved the issue that I have.
I have a Jekyll app on my gh pages where I needed to use scss features (mostly for mixins). However, I could not get jekyll to work with scss.
Currently, this is where my (CSS) files are at. All of my CSS are taken from custom.css. I imported it in header <link rel="stylesheet" href="{{ site.baseurl }}/assets/stylesheets/custom.css">.
The .scss files inside _sass folder are empty.
This is what it looks like inside _config.yml:
...
#sass
sass:
sass_dir: _sass
style: compressed
That's where I am at now. Here are some things I have tried:
I have tried changing custom.css into custom.scss (and then updated the header <link href... stylesheets/custom.scss">. When I do that, I get Resource interpreted as Stylesheet but transferred with MIME type text/x-scss... error.
I tried changing the configuration inside _config.yml into:
sass:
sass_dir: assets/stylesheets
style: compressed
... and kept the changes from 1. I restarted jekyll server. However I still get Resource interpreted as Stylesheet but transferred with MIME type text/x-scss... error.
Tried adding <link rel="stylesheet" href="{{ site.baseurl }}/_sass/main.scss">, but I get GET http://localhost:4000/_sass/main.scss error.
The problem, I noticed, is that the app seem to not recognize main.scss at all. I tried to create a simple red-colored div with main.scss, but nothing was displayed.
The question is, how can I use .scss with Jekyll?
Having _sass/main.scss, in assets/stylesheets/custom.css add the sass file (keep three dashes at the beginning):
---
---
#import "main";
Now you can work with all your sass variables/mixins etc in custom.css below the import keyword.
Make sure you add the generated css to your layout:
<link rel="stylesheet" href="{{'/assets/stylesheets/custom.css' | absolute_url}}">
Meteor compiles the css files into one css file and inserts it as first child of head element in html.
<head>
<!-- meteor inserts my concatenated css file from client folder here -->
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
</head>
I don't want to create a package for the theme assets I am using. I just want to use them directly in the html like above and I want to develop my css in the client folder with a preprocessor.
How can I get meteor to inject the generated css as last element of head rather than first which is default?
Thanks
EDIT:
To clarify further, I want meteor to inject the compiled css as shown below. I could manipulate the DOM and move that link after DOM is ready but it's a hack. Is there an API to configure this?
<head>
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
<!-- I WANT METEOR TO INJECT COMPILED CSS HERE -->
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/main.css?da39a3ee5e6b4b0d3255bfef95601890afd80709">
</head>
You can use #import url; declaration on top of your css file.
main.css
#import '/sometheme/theme.css';
body {
}
This will load /public/sometheme/theme.css before your css
Just place your css theme and meteor will concatenate it into existing css. Meteor have a special way with file order:
HTML template files are always loaded before everything else
Files beginning with main. are loaded last
Files inside any lib/ directory are loaded next
Files with deeper paths are loaded next
Files are then loaded in alphabetical order of the entire path
To achieve your goal, just make sure you the your css is deeper than the theme folder and be aware with the alphabetical ordering
Edit:
If you want to load file from /public, just place <head></head> in one of html file (e.g.: app.html) and reference your stylesheet there.
app.html:
<head>
<link href="/sometheme/theme.css" rel="stylesheet">
</head>
It will refer /public/sometheme/theme.css
In the docs you can read the following:
Import Bootstrap into a Sass file (for example, application.css.scss) to get all of Bootstrap's styles, mixins and variables!
#import "bootstrap";
https://github.com/twbs/bootstrap-sass
I have several scss files. One for every major section of my app (user-page.scss, admin.scsss etc).
I tried making one application.scss and imported bootstrap as in the docs. I added the file in index.html after bootstrap.scss and before all my other scss files.
<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" />
<link rel="stylesheet" href="styles/application.css">
<link rel="stylesheet" href="styles/intro.css">
<link rel="stylesheet" href="styles/admmin.css">
I get the following error:
/usr/bin/scss --no-cache --update intro.scss:intro.css
error intro.scss (Line 22: Undefined mixin 'make-row'.)
So it seems it does not find bootstrap. It works if I import bootstrap in each file. Is this the right apporach? I think not. I get problem when I try to manually override a bootstrap variable.
How can I have several scss files and only import bootstrap once?
Think you're mixing SCSS import with HTML CSS links. So this bit here is wrong:
<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" />
<link rel="stylesheet" href="styles/application.css">
<link rel="stylesheet" href="styles/intro.css">
<link rel="stylesheet" href="styles/admmin.css">
I assume this is from your built HTML file. Your HTML does not know what an SCSS file is. Your SCSS must be processed into a CSS file before it is usable in your final HTML file.
The way to import an SCSS file is to use that import command inside the parent SCSS file at the top. So if your main SCSS file is application.scss, then at the top of that, you import your other SCSS files:
#import "bootstrap";
But you need to make sure that the _bootstrap.scss file is in the same directory as your application.scss file for this import to work.
has anyone used Maxmertkit ? They say in documentation that you have to include some css files, but I cant find them in the package i've downloaded. Any idea ?
Sass: Syntactically Awesome Style Sheets, are included.
Download it from github
Sass Installation
Sass Basics
Or if you don't want to do all these, you can convert your sass to css from codepen, just copy your sass in css column and click the eye (shown in image) to compile it in css.
There is new version 1.0.5: http://maxmert.com/start.
You can use CDN to include css (don't forget to change {{version}}):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/maxmertkit/{{version}}/css/maxmertkit.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdn.jsdelivr.net/maxmertkit/{{version}}/js/maxmertkit.js"></script>