Importing Custom SASS Config

You can now import your custom SASS config files and use your predefined design tokens in your web-based projects.

How to Import

There are 3 ways to import your custom SASS config file:

Import when creating a new project

1. In the Locofy plugin, click on the project dropdown
2. Select “Create New” at the bottom
3. Select a web framework
4. Under the “Styling” section, select “SASS/SASS modules”
5. Click on “Import SASS Config”
6. A text box will appear, paste your sass.config.js code inside.
7. Continue creating your project and Locofy your design to see your design tokens reflected in the generated code

Import after Locofying a design

1. After Locofying your design, you’ll see the generated code at the bottom of the Locofy plugin
2. At the top right of the code panel, click on the settings (gear icon) to open the code settings
3. Under the “Styling” section, select “SASS/SASS modules”
4. Click on “Import SASS Config”
5. A text box will appear, paste your sass.config.js code inside
6. You’ll see that the generated code instantly reflects your predefined design tokens.

Import in the Locofy Builder

1. After syncing to Locofy Builder, you’ll see the generated code at the bottom of the Locofy plugin
2. At the top right of the code panel, click on the settings (gear icon) to open the code settings
3. Under the “Styling” section, select “SASS/SASS modules”
4. Click on “Import SASS Config”
5. A text box will appear, paste your sass.config.js code inside
6. You’ll see that the generated code instantly reflects your predefined design tokens