I want to add .less file into my bootstrap project but I am totally new to .less so please anyone can help to add .less file into my project.
I'm trying to add .less file for color scheme here is the link
http://rriepe.github.io/1pxdeep
Thank You in advance!
You can create a new stylesheet, i.e. style.less, and reference bootstrap.less, as well as your custom Less files.
For example,
// style.less
#import "bower_components/bootstrap/less/bootstrap"; // path to bootstrap.less
#import "my-component";
Related
I am new to styling using app.scss for a new create-react-app and would like to know the following:
Should i store all the .scss and .css files in the style folder?
If I would like to import all of them into the app.scss, how do I
go about doing that?
I noticed that app.scss does these:
#import '~bootstrap/scss/bootstrap'
$fa-font-path: '~#fortawesome/fontawesome-free/webfonts'
When i tried to do this: #import './myStyles.css' it does not get picked up. I am not sure what is going on.
The reason i am adament about putting it in the app.scss file is becauase i created a toggle that allows me to switch between dark and light theme. However, I am unable to add customed theme to the existing themes.
Hope my question is clear
Here is reply for you query-
1.Should i store all the .scss and .css files in the style folder? - for this you have to make two folder, one is css and another sass(better approach)
2.If I would like to import all of them into the app.scss, how do I go about doing that?-
"#import 'reset';" no need of scss extension
If you are working on big project then i would suggest you that better follow this structure.
inside sass or scss folder make subfolder for diffrent works like vendor, module,particles etc. like modules/_colors.scss and follow below structure
// Modules and Variables
#import "partials/base";
#import "partials/buttons";
I hope this will help.
Ok. So this is my first lLaravel project. And I got into an odd issue. I am trying to customize the authentication forms by using bootstrap and my own added SASS files (which then are converted into the main app.css). So here is what is the issue: in the app.scss file I have imported the SASS partials and other external resources:
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
// ADDED Login
#import "login";
In this form, when the app.scss file is translated into the app.css, I receive an error "File to import not found or unreadable: node_modules/bootstrap-sass/assets/stylesheets/bootstrap.
on line 6 of resources/assets/sass/app.scss". Anyone has any idea on how to fix this, suggestions on how to manage my css and sass files? Thank you in advance for your time.
I found a quick fix, but I am not sure that it is the best one. I downloaded a bootstrap.min.css and added it in public/css/ . Then, in the app.scss I imported the bootstrap file "#import "bootstrap.min.css";". That turned out to be a fix so far.
Simply just add a ~ to beginning of the imported directory
#import "~node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
it should be like above.
I have the following sass directory
sass
config.rb
-base.scss
-mixins.scss
-main.scss
site
-dowmloads.scss
-messages.scss
...
...
This works fine, however I don't want all my .scss files to compile to css files.I just want to output main.css because it imports the other files.
Whenever I do compass watch all the css get created...
Is this possible?
Start the filename with an underscore. You can then import this and it's styles will only get added to the file that imports it. The actual file itself will never get generated into it's own css file.
Hope it helps.
I'm working with Twitter Bootstrap using .less files on my site, and I have changed something in variables.less, and now I want to recompile the code. Can anybody point me to a source for how to recompile the .less code? Manually editing the file is not working.
Try SimpleLess. It's free for all platform http://wearekiss.com/simpless
Here follows a possible set of operation to perform to recompile changes. I suggest you to do the changes in a different file and then import the file with custom changes:
create a custom.less file in the same or a parallel directory (ex.: ../shared) of the variables.less file; add in the custom less file the reference to the variables.less file and the new definition of the constant (ex.: cell padding for tables);
#table-cell-padding: 5px;
#table-condensed-cell-padding: 2px;
add the reference to the custom.less file in the bootstrap.css file soon after the variables.less
// Core variables and mixins
#import "variables.less";
#import "../shared/custom.less";
#import "mixins.less";
compile the modified less files with web compiler (install it from Tools->Extensions and Updates if you don't have it);
check into bootstrap.css that the custom values are properly changed as the ones you set in custom.less;
check in compilerconfig.json (a file created from Web Compiler) that the file bootstrap.css that you are creating with compilation is the same referred in _Layout.cshtml; In case, modify the outputFile of the json file to overwrite the bootstrap.css referred in the _Layout.cshtml file;
I'm using LESSCSS (with Zend) and, I import some .less files.
Like that :
Zend :
->headLink()->appendStylesheet(array('rel' => 'stylesheet/less','href' => '/css/'.$moduleName.'/content.less'));
So in the main content.less (the only file using "link" html tag). I import other files :
#import "../commun.less";
#import "../menu/menu.less";
#import "../font-face/font-face.less";
But, when I change css rules in the commun.less , it's not working. The changes aren't effective!
The files are compiled, yes, of course, but why I can't modify a .less imported?
I think you should #import .css files and not .less files into your stylesheet. LESS will only compile the stylesheet. It won't change your documents in .css to .less.
Hope I could help. If I did, please say so.