I'd like to make the popular LESS library LessHat available to my Brunch template but I want it done in a way that I can:
Take advantage of the Bower integration so I always have the latest
Rather than having the library transpiled to CSS I want the LESS to be made available to my own custom LESS files
Is this possible? A step too far? Obviously, it's not hard to put the static LESS file into my app/stylesheets directory but this makes the linking static and I don't get the Bower integration which would be pretty slick.
Just link to the lesshat-file in your less files. This way you can use lesshat-functions and still update lesshat with bower.
For example
#import 'bower_components/lesshat/build/lesshat-prefixed.less';
if you have styles.less in your project root folder.
Related
I'm currently creating an npm package that will consist of a series of React components that are common to some applications I am maintaining.
My intention is to be able to import this components individually as needed, not all at once. So for instance if I have the components Accordion, DropDown and Widget, but I'm only using one of them, I'd like for only its code to be required.
My understanding is that I would need to be able to do something like
import Widget from 'components/Widget';
Instead of
import {Widget} from 'components';
But I can't get the first version to work. I have not published this package, so I'm using npm link to test it on another application. I'm not even sure what to Google to solve the problem myself, so I'd also appreciate links to relevant documentation on this matter.
Thanks.
So, of course a few minutes after asking my question I resolved the issue:
First, as Yacine Filali commented on my question above, I need to have individual files in order for this to work (this part I had already figured out).
However, I was incorrectly assuming that the root of my package was going to be set to whichever directory my entry file was in. So in package.json I had set
"main": "./lib/index.js"
Incorrectly assuming that the folder structure would be read from there. After altering my configuration to build everything into the root directory it worked perfectly.
(Of course, I'm now working on a better alternative, like generating a package.json for the lib folder)
In your component:
export default Widget
In your index:
export { default as Component } from './Component'
The foundation framework for sites is great but there are lot of steps to start especially for a person who writes server side code.
We need the following:
Single SCSS file with all the code in it in the defined order with all the variables in it. I don't want to mention the include statements.
This is required so that I can run simple sass command:
sass input.scss output.css
I know this can be done simply by combining the files in any text-editor but how to resolve the point mentioned below:
I read in the document that auto-prefixers are not in SCSS files so how these will be handled in the above case.
The one solution I have is to use the compiled CSS, but I still want to have flexibility to change the variables and compile with simple sass command.
Can you please provide solution for this?
You can use the Foundation CLI to generate a project from a template that addresses all of your concerns:
http://foundation.zurb.com/sites/docs/installation.html#command-line-tool
The ZURB template is the one you will want to use since it comes with autoprefixer:
http://foundation.zurb.com/sites/docs/starter-projects.html#zurb-template
I've been trying to optimize my browserify build. Basically, I only want to include a subset of my server files in my bundle. What I really want to do is hand-pick the files that I want it to include, as I have a pretty large project. Browserify seems to really like to follow requires very eagerly and put them all in my bundle. I know I can tell it to exclude/ignore files, but it's really annoying to have to explicitly exclude almost every file in my project.
Is there some way to make browserify NOT follow requires as its default behavior and include ONLY the files that I tell it to?
Browserify just have exclude and ignore by default, to control which modules are put in the package.
To implement this functionality the best way would probably be to do a PR to browserify. If you want to do it just in your own project one way is to create the Browserify object:
var browserify = require('browserify');
create the functionality for include (just copying what they do for exclude) and then overwrite the _createDeps. Maybe just copying the whole function except for the part where it chooses what files to include.
We are starting a new project using angular2, typescript and gulp. For the time being our application will consist of two subprojects: a components library (which in the future might be spun off into a separate project) and the app using the component library.
The layouts of the project is going to be something along the lines:
/project_root
/component_library
/src
/library
/components
/services
... etc
/application
/src
/app_name
/components
/services
... etc
The components in application will be using components from the library (but not the other way round)
We would like to have clean (non relative) imports in the app components when importing stuff from the library (we want to avoid ugly imports of the sort '../../../component_library/src/library ...etc' plus, what's more important, we want to be able to move the library code to a separate project without the need to update imports.
There are two possible solutions I see (don't like any of them):
Add a gulp task that would watch the component library and on every change copy the file to node_modules in /project_root
Some sort of simlink? so that we can point /project_root/node_modules to /project_root/component_library/src?
I'm afraid the first solution might not work well with IDE autocomplete in the application (first gulp would need to do the compilation/copying then the IDE would need to pick up the change from node_modules - this looks like something that can be really slow)
The second solution feels hacky - it would need to be repeated by everyone who checks out the code from repo.
What would be the best solution here?
what's more important, we want to be able to move the library code to a separate project without the need to update imports.
Ship your component_library with source and add it as a node_module dependency. Then when someone pulls your code they can add a git remote to node_modules/component_library code and work on the two projects seemlessly.
This is the approach I took with ntypescript.
I know of static asset versioning plugins for Grunt and Gulp (gulp-rev) which will append a content hash to the filenames to prevent caching issues, but I cannot find one for Brunch. Is anyone aware of one? Thanks.
I found the Brunch plug-in called digest-bunch. It requires the js references in the index file to be decorated which I don't like, but it does what I need it to do.