How to use sass for Meteor on development? - meteor

I am learning my way through Meteorjs and I want to write the styles of my code using sass, I added fourseven:scss plugin to my meteor app with meteor add fourseven:scss and documentation says
Without any additional configuration after installation, this package automatically finds all .scss and .sass files in your project, compiles them with node-sass, and includes the resulting CSS in the application bundle that Meteor sends to the client.
So I created some .scss files in /client/styles/ and I was expecting for the plugin to detect those files and generate a css file that meteor would bundle in the browser, but it doesn't work that way I guess, that means the file will be generated when I build my app? Is there a way to get the compiled files immediately after a change, just like npm compiler packages? thank you.

You can edit a scss.json file in your root folder to show straight where css and scss files should lay.
{
"enableAutoprefixer": true,
"includePaths": [
"path/to/some/sass/folder",
"path/to/another/sass/folder"
]
}
If you starting meteor server he already watch for changes in CSS files and refreshing browser on change without reloading page via Browserify.
Thank for providing the code Adnan Y

Related

Can I override settings in a Gruntfile from a child directory?

I'm working on a plugin for Moodle that involves a lot of compiled JavaScript. Because of the complexity of the plugin, I'm writing it in TypeScript and compiling it with Webpack. This is all working fine.
However, Moodle has built-in Grunt tasks to help with JavaScript deployment, including uglifying the code. My compiled code is already minified, so this step isn't necessary. For some reason, putting the compiled code through the uglifier creates errors in the browser that aren't present with the non-uglified version. Because of this, I'm hoping to find some way to override the Grunt task.
The Grunt task is pretty simple; it uses a glob to find all javascript files in the various plugin folders in Moodle. I don't want to modify the top-level Gruntfile so that others can use this plugin without having to touch the core Moodle files. Is there a way I can create a Gruntfile (or some other flag) inside my plugin's directory that signals the parent Gruntfile to ignore my compiled file?
Unfortunately, removing my file from the watched folder is not an option. In development mode, Moodle serves the pre-compiled "src" script, so I need to keep the file there for development purposes (otherwise, I need to manually purge the cache each time I want to load the updated file).
Here's a general overview of what's happening:
Directory structure:
public (main Moodle directory)
Gruntfile.js
local
my-plugin
amd
src
my-webpack-compiled-plugin.js
build
my-webpack-compiled-plugin.min.js
my-webpack-compiled-plugin.js is the file output by Webpack (the file I don't want to be uglified)
The Gruntfile.js contains, amongst other things, this:
amd: {
files: ['**/amd/src/**/*.js'],
tasks: ['amd']
}
The amd task is where the files get uglified.
So I'm hoping to find some way to exclude local/my-plugin/amd/src/my-webpack-compiled-plugin.js from getting to the amd task from within the /local/my-plugin directory to keep my plugin self-contained.

Basics of importing scripts in angular2 using nodejs and npm with ASp.net Core 1

Hi i just finished installing asp.net core1 so got introduced to npm , bower and nodejs after researching a lot i chose to go with angular2 .
now my problem is that i have never used gulp, grunt etc even though i know how it works and why to use it. there are lots of instructions on web to setup angular2 project with mvc6 but not explaining the thing which is new with mvc6.
anyways i dont want to get myself confused with gulp/grunt etc right now so i am just copying files from node_modules to my script folder and giving it path but it works almost for everything related to angular.
for eg.
import {anything} from 'angular2/core' or from RXjs etc(this import is from node_modules) and i have to give a path in my index files where i have copied all the files.
but when i try to include some plugins like ng2-select, ng2-bootstrap or toastr etc it doesnt work the way it should it throws errors.
my question is do i need to copy whole folder from node_modules to my script folder and then linq it or what , how it works?
Do I need to copy whole folder from node_modules to my script folder and then link it or what, how does this work?
I have an example in my blog post of what you should be doing in this situation. Ideally, you will use a gulpfile.js to orchestrate your desired file needs. For example, if you're looking for Angular2 it is rather simple. You create a gulpfile.js by adding a new item to your project. In that file you write some simple "tasks" that automate this move for you. You look in node_modules and move over anything that you need. For Angular2 I move over the following .js files (in this example):
var angularJs = [
'./node_modules/angular2/bundles/angular2.js',
'./node_modules/angular2/bundles/router.js',
'./node_modules/angular2/bundles/angular2-polyfills.js',
'./node_modules/angular2/bundles/http.js'
];
So to answer your question more directly, no. You do not need to copy the entire folder -- just the files that your application needs.

Should I configure a watcher for less files in a meteor project

I'm setting up a meteor project in Webstorm and so I added less, and converted my .css file to .less.
Webstorm sees that this is a .less file and prompts me to add a watcher.
Given that this is a meteor project, is it necessary to add the watcher or does Meteor take care of this?
No need to use file watchers - if meteor less package is added, meteor takes care of compiling your .less files

How to include your own css files in a rails application using bower?

I am working on a rails app and I would like to include some custom css files inside my rails application. I would like to separate out the css from bootstrap and the css that I wrote. Could I just put the custom css files inside vendor/assets/bower_components folder in my own css folder?
Is there anything else that I need to do for my css files to be picked up?
There are several ways you can achieve bower functionality in a Rails application.
Although having said that, I'm not sure about your wanting to use it on your custom.css file. The file itself will work just as well if you keep it in your app/assets/stylesheets folder, which will concatenate it to the asset pipeline
Bower-Rails
You'll may wish to consider using bower-rails, which seems to just give you the ability to use bower within your Rails app. This seems to be specifically for helping you keep your dependencies up to date:
Dependency file is bower.json in Rails root dir or Bowerfile if you
use DSL. Check out changelog for the latest changes and releases.
RailsAssets
Another amazing piece of functionality we found recently is "RailsAssets"
This works really well (we use it in production), as it keeps your dependent assets completely up to date. You can use it very simply:
#Gemfile
source https://rails-assets.org
gem 'rails-assets-BOWER_PACKAGE_NAME'
#app/assets/javascripts/application.js
//= require BOWER_PACKAGE_NAME
When running bundle update, this will then give you the ability to update your assets in line with your app!

Exposing Sass file from Meteor package for Meteor App importing

I'm working on building a package for meteor 0.9+ that exposes a library off sass mixins called 'Bourbon' and am trying to sort out the best way to provide access to '#import' a stylesheet from the package into a Meteor project.
https://github.com/wolvesio/meteor-bourbon/
Pre Meteor 0.9 this used to be done via something along the lines of:
#import "packages/wolves:bourbon/bourbon";
Since the package system changed though this no longer works. Any help as to the best way to do this moving forward would be greatly appreciated.
I've managed to accomplish what you want, it's a bit hacky but it works at last.
First, you need to add the .less files as server assets in your package :
Package.onUse(function(api){
api.addFiles([
"bourbon/style1.less",
...
"bourbon/styleN.less"
],"server",{
isAsset:true
});
});
Then run meteor to trigger the building of your application : this will copy over the server assets to the .meteor directory of your application. More precisely, your .less files will now live in ".meteor/local/build/programs/server/assets/packages/wolves:bourbon/bourbon/*".
Now you can reference these .less files in your application using this super unfriendly path.
I recommend hiding this stuff from your package users by defining an import.less directly in the package :
packages/wolves:bourbon/bourbon.import.less
#bourbon-root: ".meteor/local/build/programs/server/assets/packages/wolves:bourbon/bourbon/";
#import "#{bourbon-root}style1.less";
//
#import "#{bourbon-root}styleN.less";
Then in the package README, invite your users to simply copy bourbon.import.less in their client directory and reference it from there.
client/lib/config/style.less
#import "bourbon.import.less";
There is one drawback to this approach that I was unable to solve at the moment : the .less files are copied in the .meteor directory when your application is built (a process that happens when triggering meteor run).
However, the build process will try to compile your application .less files FIRST, before copying the server assets (in this case our package .less files) to the .meteor dir.
So the very first time you add the package to an app, it will complain that it is unable to find the package .less files, triggering a rebuild (either by killing and relaunching meteor or touching your application .less files) will fix this though.

Resources