sass - Scss dependency inside scss file using bower -
i'm developing scss framework similar bootstrap own projects.
this project registered bower package. , in scss files i'm depending on bower package need @import
in other scss files.
it seems declaring dependency in bower.json file not enough.
what right way include dependent scss files other bower packages?
this bower.json file:
{ "name": "pre-cortex", "version": "0.0.5", "authors": [ "ole henrik skogstrøm" ], "description": "a scss framework", "main": "pre-cortex.scss", "keywords": [ "pre-cortex", "cortex" ], "license": "mit", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "compass-breakpoint": "~2.5.0" } }
and main file:
// first line not correct. not work when package installed in other projects. @import "bower_components/compass-breakpoint/stylesheets/breakpoint"; @import "components/css-reset"; @import "components/form-reset-helpers"; @import "components/variables"; @import "components/typografi"; @import "components/grid"; @import "components/helpers"; @import "components/nav-horizontal"; @import "components/nav-vertical"; @import "components/jumbotron"; @import "components/well"; @import "components/form"; @import "components/button";
i found solution based on @bassjobsen comment.
use normal @import path in bower package trying include project. example:
@import "../compass-breakpoint/stylesheets/breakpoint";
the problem was using bower link
refer development version of package (read more bower link
here). correct path.
with bower link. caused path wrong when including @import '../etc/etc'. since package symlinked in.
to solve add additional loadpath compiler. i'm using gulp me added line styles.js file: loadpath: ["bower_components/angular"]
example:
var sassoptions = { style: 'expanded', loadpath: ["bower_components/angular"] };
the result 1 of load paths now:
bower_components/angular/../compass-breakpoint/stylesheets/breakpoint
which works perfectly, both linked bower packages , normal installed ones. :)
Comments
Post a Comment