I am running a Django website, when I deploy to the production server, the LESS file is loaded but not rendered, everything works fine in the local server, any idea why?
You'd normally compile/transpile your Less file into CSS and include the CSS in your project, rather than including your Less file.
npm install -g less
lessc base.less > base.css
It is possible to compile the Less file in your browser by including less.js but this is not recommended in production.
Related
What's the state of the art when it comes to making Sinatra reload compiled SASS files in development? I've found that when I'm editing pure CSS the app updates on browser refresh. However when using .scss files (which I watch with sass --watch public/styles/scss:public/styles/css/) this doesn't work — I have to restart the above watch to see the latest changes (with the server running).
I've tried Sass::Plugin::Rack, Sinatra Reloader, and Rack::LiveReload, with no success.
Issue solved — tried Sprockets but that didn't work because I'm using Ruby 1.9.3. Running sass --watch manually instead.
I've been using less for front-end development but i'm getting this error last couple days.
I'm using PhpStorm's watchers to compile less files to css files. But when i edited the less file, the compiler adds this line to top of css file and the css file doesn't work anymore.
Also it doesnt even compile the less file;
The proper name for LESS compiler is lessc which is installed as npm package (npm install -g less). It is written in JavaScript and requires nodejs to run.
The less command you are using seems to be the standard Linux/Unix "less" command.
With Yeomam I choose Webapp project with bootstrap and scss.
In the html file it includes reference to main.css.
To run it I need to run grunt serve which creates main.css file from main.scss.
If I run directly the files from browser I will miss main.css because it has not been created from scss.
How can I create it in order to run from browser without grunt?
Another option to compile scss, programs like prepros or codekit, I use it daily in my work
prepros free:
https://prepros.io/
codekit:
https://incident57.com/codekit/
I'm using the Yeoman stack to bootstrap an application and had a question on how CSS files should be handled. (I've uploaded a sample on Github : https://github.com/ddewaele/jQueryDataTablesGrunt)
The basic question is : How do you go about handling different CSS files
during development (when running grunt serve)
when packaging the app (when running grunt build).
I have installed a number of libraries through bower that come with CSS files.
For example the jQueryDataTables library has the following CSS
bower_components/datatables/media/css/jquery.dataTables.css
Now, the way I understand it is that I should never reference this jquery.dataTables.css file directly in my index.html (I hope this assumption is correct).
My index.html should only contain
<link rel="stylesheet" href="styles/main.css">
I assume that this styles/main.css will be generated by the grunt workflow and will be correct both in dev mode, as well as in dist mode.
I'm puzzled by a couple of things
How should I tell grunt that I need to include for example bower_components/datatables/media/css/jquery.dataTables.css
Do I do need to reference that jquery.dataTables.css in my index.html, or in my Gruntfile.js, or simply drop it in app.styles ?
How does grunt decide what CSS files it needs to assemble into a single main.css
How does grunts behavior differ between grunt serve and grunt serve dist
Here's what I found :
grunt serve
When calling grunt serve , a CSS file is generated called .tmp/styles/main.css,
That is in fact the CSS file that is used by the app when it launched by 'grunt serve'.
That main.css file only contains stuff coming from the app/styles/main.scss file.
Other CSS files that are put in app/styles/ are not being picked up by grunt serve.
grunt serve:dist
When calling grunt serve:dist, a CSS file is generated called dist/styles/2314bw1.main.css
That is in fact the CSS file that is used by the app when it launched by grunt serve:dist.
That main.css file contains everything that it found in app/styles/*.css,
So the basic issue is that when running grunt serve , the generated main.css does not all the classes from all the css files found in app/styles/*.css.
However, when packaging the app grunt build or grunt serve:dist, it does contain all classes from all the css files found in app/styles/*.css.
How do I configure my app / grunt to use these external CSS, and how do I get to a situation that works during development, as well as during packaging.
I'm not familiar with Yeoman but it look likes it's running gruntjs underneath. You can edit the tasks to include plugin specific styles.
This is your gruntfile.js
How does grunt decide what CSS files it needs to assemble into a single main.css ?
Drop your plugin specfic styles inside "app/styles". You can give it a special folder if you want to. Then add to your main.scss. Sass will compile everything down in the main.css.
First in console:
cp jquery.dataTables.css jquery.dataTables.scss
Then add the import into main.scss
#import "jquery.dataTables"
How does grunts behavior differ between grunt serve and grunt serve dist?
serve:dist does this(see code below), it builds your files, opens a link to your server, creates a dummy webserver to serve your files using connect
if (target === 'dist') {
return grunt.task.run(['build', 'open:server', 'connect:dist:keepalive']);
}
serve on the other hand watches changes to your files.
I have a pretty basic SASS setup running, which includes the following folder structure:
css
style.css
-modules
_all.scss
_globals.scss
partials
_base.scss
_normalize.scss
_styles.scss
vendor
-empty
I am telling SASS to watch the following sass --watch modules/_all.scss:style.css --style compact.
The issue is, that one one machine a change to ANY file included in _all.scss is recorded and output properly. On another machine, completely up to date, a change to a partial file thats included in _all.scss does not record a change, and therefore no styles are output. I have to reset SASS to watch the partial _all.scss once more for the change to be recorded.
Has anyone experienced these inconsistencies before? I'm not looking to watch an entire directory as I wish to have only a single stylesheet output...
Both builds have the same version of sass, ruby and command line tools running.
It seems like the sass-cache is not being busted when you make the change. You can try disabling the cache on the broken machine to see if the problem resolves. If it does, check manually delete the cache directory and try again.
Side note, you shouldn't have to use the watch command with rails (unless you're doing something unique). Sprockets is supposed to have plugins which do this automatically when serving assets.
In fact, I suspect that this may even be a conflict between sprocket's SASS engine configuration and the sass watcher binary configuration.
See the default cache configuration for the sass binary here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#cache_location-option