Can't use tokens

[tiagoleal25]

I am trying to use the tokens on your example app (https://github.com/viljamis/vue-design-system-example) but it always returns an error not recognising the token. I did all the steps on the documentation.

<style lang="scss" scoped> .button { font-family: $font-primary; background: $color-rich-black; color: $color-white; } </style>

[sdellis]

I don't know if you can use the tokens outside of the vue-design-system components. I have a similar problem though. I am importing and using vueds components into a Rails app, but I want to have some app-specific local components use the vueds tokens and scss variables/mixins for consistency. I'm not sure if this is possible.

[arielsalminen]

@tiagoleal25 @sdellis You can & should use them outside of the design system components too, but you need to import the generated token file(s) separate. This is what gets generated when you run a build: https://github.com/viljamis/vue-design-system/tree/master/dist/system (notice the tokens directory there)

To import the tokens for use as well, do the following:

// Import the Design System import DesignSystem from 'vue-design-system' import 'vue-design-system/dist/system/system.css' import 'vue-design-system/dist/system/tokens/tokens.scss'

That’s a basic example, so depending on how your project is set up, you might want to import the tokens in a different way to make them available globally for all your non design system components.

[sdellis]

Ok, I can use the system.css files without any problem. The tokens.scss is another story because I'm working on a very large and complex Rails project where we are "phasing in" the VueDS and have to simultaneously support both the Rails Asset Pipeline and Webpack for a while.

There is no way I'm aware of to import the .scss file from the npm package into the Asset Pipeline. The Asset Pipeline uses only the scss @import, not node imports. If anyone knows, let me know!

[sdellis]

Ok, I think I was misunderstanding. I am able to use VueDS tokens in my host app's local components with the suggested approach. I think this will be fine for my team going forward. Thank you for the tips @viljamis !

[tiagoleal25]

I was wrong also. My bad. Thanks guys anyway

[arielsalminen]

@sdellis you should be able to import using scss @import too. The path probably just needs to be edited a bit depending on if it’s relative or absolute.

[sdellis]

@viljamis Yes, I got it now! I just needed to point to the .scss file in the vueds dist directory in the node_modules for my .scss @import. Awesome!