I use Syntastic to help catch my syntax errors early. It's set to also check any scss but errors for any scss files that reference variables defined in my "_variables.css.scss partial.
I'm assuming that the variables file isn't be required into the context, but works fine in the app because of the Rails asset pipeline.
I'm not sure when/where/how to do so to resolve the Syntastic errors. If I import "_varibles.css.scss" from within the scss file, errors are resolved. But is there a better way than to do this for all files w/ similar errors? Any guidance? Thanks.
Partials do not require the .css extension instead you can just rename it _varibles.scss
Partials should always be imported from your main scss file.
Related
I have installed vue-star-rating module with npm. I want import this module in my JS file
var StarRating = require('vue-star-rating');
When I hover on 'vue-star-rating' shows full path to module and module also exists in noe_modules folder, but when I run my app in console I get a
ReferenceError: require is not defined
message. I have tried also other methods to import, but it still doesn't work.
import StarRating from 'vue-star-rating'
Also, you will need something like Webpack to compile and create the bundle properly. It will not work without a bundler.
Are you using a compiler to generate a bundle?
You can't reference modules this way as require doesn't exist on the client. You need to use something like fuse-box, webpack, etc. to properly handle the require function and include the modules you're referencing in your client bundle.
I have a .less files directory with:
main.less (just import the dependencies)
dep1.less
dep2.less
etc.
I want that modifying a dependency triggers the compilation of the main.less file ONLY.
For now here is my configuration in WebStorm Less watcher. What scope and arguments I need?
Thx to #LazyOne comments I manage to find the right settings.
set the watch scope to the entire folder
put ../$FileNameWithoutExtension$.css at the end of less command arguments
uncheck Create output file from stdout causing empty output file (don't know why)
check Track only root files. Which is not very explicit in my case. Indeed it does not really watch the root file but all the #import dependencies and ONLY COMPILE THE ROOT FILE.
If you prefix your partial files with an underscore
(_dep1.less,_dep2.less)
they wont be compiled. And that doesn't even effect how you call them: #import _dep1.less will import _dep1.less.
I would like to ask what is the purpose of using browserify with noparse option set to true (or how browserify works). For instance:
if browserify does not parse files at all, does it means that it will not find require statements?
if it does not find require statements, then how to force code to load module? For instance, I have toastr & jQuery. toastr requires jQuery. But when I used browserify to create a bundle with noparse set to true, and I added to this bundle both files:
var bundler = browserify();
bundler.add('jquery.js');
bundler.add('toastr.js');
bundler.bundle();
then I get the error, that jQuery module it not found.
Normally when you bundle a file with browserify, it parses the file for require() calls so it can build a dependency graph and bundle the required files. The purpose of the noParse option is to skip that parsing when you don't need or want it. For example, if you're bundling a large library file like jQuery and you know it doesn't contain any require() calls that need to be processed, it will save time in bundling if you noParse that file. Also, it's currently difficult to require() a previously browserified bundle when making a new bundle. In that case you can sometimes resolve the issue by setting noParse for the previously browserified bundle.
if browserify does not parse files at all, does it means that it will not find require statements?
Yes.
I'm currently using the OSX app LiveReload v2.1. It watches and compiles my HAML files just fine but for some reason it doesn't seem to compile my SASS files properly. It checks my SASS files - I know because it warns me of SASS related errors upon saving. It also creates the appropriate CSS files upon saving the SASS files however, when I open the CSS files they are completely blank.
I'm a bit of a SASS n00b but I'm just trying to get any basic styling to compile down to proper CSS. For example, the following:
body
background-color:blue
Any pointers on what I might be doing wrong would be much appreciated. Also, I should point out that I also manually installed the SASS gem, just in case, though that didn't seem to fix anything.
I figured it out. It didn't have to do with LiveReload at all, but instead how my SASS was formatted. There needed to be a space between the attribute and value. For example:
body
background-color:blue
Should have been:
body
background-color: blue
It would have been nice if SASS pointed this error out rather than simply spitting out an empty CSS file, oh well.
Hello I have one question I have my file main.scss which is in public/stylesheets/scss. In documentation is written:
By default, .sass and .scss files are
placed in public/stylesheets/sass
(this can be customized with the
:template_location option). Then,
whenever necessary, they’re compiled
into corresponding CSS files in
public/stylesheets. For instance,
public/stylesheets/sass/main.scss
would be compiled to
public/stylesheets/main.css.
I have in my gemfile gem 'haml'
And from my view I do sth like this
= stylesheet_link_tag 'main'
And the file is not found when I check the source(there is a file with with information about routing error). I guess that compiling it by hand it is not way to go so how I can make compile scss file to public/stylesheets automatic? What mean in documentation that they are compiled when necessary?
Thanks in advance
Put your .sass or .scss files in public/stylesheets/sass, not public/stylesheets/scss. Then the stylesheets should automatically generate whenever you change the corresponding sass/scss file. The generated stylesheets end up in public/stylesheets/.
Renaming the folder should make it all work.
EDIT: it looks like Rails 3.1 is going to be not only including SASS by default, but it will also be moving most of the stuff found in the public folder to the app folder... so this answer will only apply to versions of rails before 3.1.