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;
Related
I'm working on a custom theme for my local WordPress site. I've set up a File Watcher in PhpStorm that compiles my scss files in myTheme/scss/ to myTheme/style.css.
This works as intended, the variables which I've declared in _variables.scss are able to be used in style.css or any file imported after it.
My problem now is that the #import '~foundation-sites/dist/css/foundation.min.css'; is being compiled as #import '~foundation-sites/dist/css/foundation.min.css'; instead of the actual css content.
I've tried using #import '../node_modules/foundation-sites/dist/css/foundation.min.css'; instead but this compiles the same way.
What am I doing wrong?
.css extension in import statement tells the compiler to generate plain CSS import instead of pulling the contents in; see https://github.com/sass/sass/issues/556#issuecomment-397771726 for reference.
I'd suggest changing your import to
#import '../node_modules/foundation-sites/dist/css/foundation' - this should help.
Note that ~ prefix is a webpack feature SASS compiler is not aware of. So, when using SASS in your file watcher, you have to either change paths to relative or pass --load-path node_modules/ to compiler
I ran into this issue and this solved it for me. Uncheck Track only root files, which is defaultly checked.
I have a _common.scss file which I import to various page.scss files:
page.scss:
#import "common";
#page {
...
}
_common.scss:
#import "partials/all";
#import "components/all";
...
But the problem is, since all my pages import _common.scss, the way I have things structured, if I make any changes inside _common.scss (or any of the files it imports), sass has to rebuild all the page css files. But if I just make _common.scss its own file and call it with a <link> tag (<link href="common.css">), then the page.scss file has errors, because it is trying to use variables and mixins defined in _common.scss and its imports.
Is it possible to structure my project so that the page.scss files can use all the mixins and variables in _common, but so that sass doesn't have to rebuild each page.css file each time I make a change to the common file? i.e. - make it so that sass only builds the common file when a change is made in common, and only builds the page file when a change is made in page?
I would say it is not possible, since the aim is to have one css for each page at the end. This said it HAS to be rebuild if something is changed in common.
I have some problems with SASS in ionic,
Whats the problem?
The problem is that custom stylesheet's doesn't work how it should.
I have sass folder with ionic.app.scss file and _test.scss file with some code.
I imported _test.css in ionic.app.scss file like this:
#import "../scss/test";
And when I edit and save ionic.app.scss, it's works perfectly, compiled in min.css and working in my browser, but when I edit and save my _test.scss file, nothing happening. _test.scss file only works, when I compile my ionic.app.scss file.
Can someone help me with that? What I miss??
Without seeing your folder structure, It's a shot in the dark but i think your _test.scss file isnt being watched.
Try moving it to be in the same directory as the other files and change your import to be.
#import "{folderName}/test";
Just make sure its within the scss folder with the other files
First of all I'm assuming you are using Ionic 1.x.x in my answer. You have a couple of places where you should check.
First is the ionic.project file:
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]
Make sure you have your directory inside the watchPatterns. This most probably is correct since it's the Ionic default. You however mentioned sass folder in your question so I can't be sure. This is why I'm suggesting all the custom folder stuff below. Although you also mentioned that ionic.app.scss is located in the same folder so the folder probably is the default ionic folder if you have not changed the name of the folder.
Secondly in your gulpfile.js you have the following:
sass: [
'./scss/**/*.scss',
'./www/customfolder/**/*.scss'
],
Make sure your css file is included in these paths. The second one is a possibility when a custom folder is used. Just set the path correctly. This will then use the default ionic gulp task sass and watcher watch.
After this you should be able to include your custom SASS stylesheet in the scss/ionic.app.scss file (not in www folder) with the following:
#import "www/customdirectory/style"; // If custom directory
/* IN YOUR CASE */
#import "style";
If the _style.scss file is in the same directory as the ionic.app.scss then you do not need to set the path, just the name of the file is enough.
Hopefully this can be helpful to you when trying to solve your problem.
I'm pretty new to the use of .less files. I downloaded a FLAT UI bootstrap. Now I wanted to change the base color of the bootstrap and therefor I used the variables.less file. There I changed the brand-primary to an other colorscheme.
Now I read everywhere I need to compile this file. But to where do I need to compile this because there is no variables.css file available only there is a bootstrap.css file and flat-ui.css file. I'm I seeing something wrong here?
It's about this bootstrap: http://designmodo.github.io/Flat-UI
How can I prevent changes in files imported to bootstrap.less from being compiled into files, which have bootstrap.less imported?
I have custom.less file imported into bootstrap.less Each change of custom.less generates new bootstrap.css. So far so good.
But I also have another file, choosen.less, and each change of this files generates new choosen.css file - this is also expected.
The problem is that each change of custom.less generates not only the new bootstrap.css but also new choosen.css, because choosen.less imports bootstrap.less.
As final result I get duplicated code in bootstrap.css and chosen.css
So, how can I prevent from changes outside bootstrap.less from being compiled into choosen.css ?
It sounds like you're referencing choosen.css and bootstrap.css separately.
If so, you can't actually want to import Bootstrap into choosen.css at all.
(alternatively, simply remove the direct reference to Bootstrap)
If you want to be able to use Bootstrap mixins in choosen.css, just import bootstrap/variables.less and bootstrap/mixins.less.