search

pattern-lab / plugin-node-tab

ARCHIVED - The Tab plugin allows you to define additional code tabs to the pattern viewer / modal.
http://patternlab.io/
MIT License
5 stars 9 forks source link

Ability to add SCSS partials #21

Open EdwinMeijne opened 7 years ago

EdwinMeijne commented 7 years ago

Maybe I am overlooking something, but I would like to have the possibility to include SASS partials files _<filename>.scss. This would mean that all files with either <pattern-name>.<type> and _<pattern-name>.<type> would need to be included.

What do you think? I might start implementing this for our own project but maybe there was a reason this was not implemented yet?

procload commented 7 years ago

I also would love the ability to be able to include partials into the rendered SCSS files. For example, I often do not place my SCSS files in the same directory as my mustache files so I would like to be able to @import '../scss/components/button; and have that render the generated SCSS in PL's SCSS tab.

Is this possible?

uxmfdesign commented 7 years ago

In our project we've added the scss partials by just adding a new pattern.scss file in the /patterns/atom/new-pattern folders. We then need to manually load the partials in our main.scss. It's not the best to manage but our teams can now pull scss components.

Josh68 commented 6 years ago

I'd like to second or third this request, although I'm not exactly clear how the implementation might work. For template files (mustache, hbs, etc), a processing step apparently already happens so that there's a separate tab automatically created for the generated HTML. In the case of SCSS, it seems like there'd need to be a processing step on partials (with imports) to display the generated source output in the tab (instead of just the @import statement). Beyond that, having the option for a compiled CSS tab would also be nice.

Not even sure if this could be more generic for SASS/postCSS/LESS/Stylus, depending on the build setup (I'm using the Webpack version with SASS and postCSS loaders).

I tried pulling all of my pattern SCSS files into my core SASS using a globbing pattern, but that's unpredictable, and also messy after a short while, since everything's strewn all over the place and not following the path and naming conventions you'd use in a real project. IMO, the styles should be kept together in "source/css" and pulled into patterns, rather than vice-versa.

If there's any way I could help in such an implementation, let me know.

EdwinMeijne commented 6 years ago

Currently filename.scss files are included, but _filename.scss are ignored. I tried fiddling with the pattern matcher to also include these, but couldn't get it to work.

Meanwhile, I havent' used patternlab in ages anymore but when I do it would still be great 👍