Import all sass file within directory with webpack -
i'm trying use webpack bundle files , don't know how proceed when dealing multiple folders , .scss
files.
i used use grunt these tasks, , example of folder structure:
functions - _mixin.scss - _function.scss - [...] variables - _colors.scss - _typo.scss - [...] ui - _button.scss - _grid.scss - [...] view - _home.scss - _about.scss - [...]
with grunt
run task generate file called main.scss
containing @import
, example:
@import 'function/_mixin.scss'; @import 'function/_function.scss'; @import 'variables/_colors.scss'; @import 'variables/_typo.scss'; [...]
currently i'm specifying import inside .js
file (used in conjunction extract-text-webpack-plugin
) define main.scss
file, each new import
, or old one, needs added/removed manually. there way automate task webpack
?
you use plugin import-glob-loader
github / npm
it supports globbing
@import "foo/**/*";
which outputs
@import "foo/1.scss"; @import "foo/bar/2.scss"; @import "foo/bar/3.scss";
Comments
Post a Comment