{"id":14988746,"url":"https://github.com/service-paradis/bulma-variables-export","last_synced_at":"2025-08-02T23:08:51.245Z","repository":{"id":57191458,"uuid":"197630703","full_name":"service-paradis/bulma-variables-export","owner":"service-paradis","description":"Library exporting Bulma sass variables which can be used in Webpack project.","archived":false,"fork":false,"pushed_at":"2020-10-28T14:55:03.000Z","size":11,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-23T03:05:31.213Z","etag":null,"topics":["bulma","bulma-css","bulma-css-framework","bulma-framework","bulma-variables","css","javascript","sass","typescript","variables"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/service-paradis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"service-paradis"}},"created_at":"2019-07-18T17:33:56.000Z","updated_at":"2024-07-13T10:16:25.000Z","dependencies_parsed_at":"2022-09-16T05:02:23.763Z","dependency_job_id":null,"html_url":"https://github.com/service-paradis/bulma-variables-export","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/service-paradis/bulma-variables-export","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/service-paradis%2Fbulma-variables-export","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/service-paradis%2Fbulma-variables-export/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/service-paradis%2Fbulma-variables-export/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/service-paradis%2Fbulma-variables-export/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/service-paradis","download_url":"https://codeload.github.com/service-paradis/bulma-variables-export/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/service-paradis%2Fbulma-variables-export/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268470799,"owners_count":24255391,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bulma","bulma-css","bulma-css-framework","bulma-framework","bulma-variables","css","javascript","sass","typescript","variables"],"created_at":"2024-09-24T14:17:08.484Z","updated_at":"2025-08-02T23:08:51.204Z","avatar_url":"https://github.com/service-paradis.png","language":"SCSS","funding_links":["https://github.com/sponsors/service-paradis"],"categories":[],"sub_categories":[],"readme":"# bulma-variables-export\n\nLibrary exporting Bulma sass variables which can be used in Webpack project. Bulma variables can be imported into any Javascript/Typescript project.\n\n![Bulma.io](https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png)\n\n- [bulma-variables-export](#bulma-variables-export)\n  - [Quick install](#quick-install)\n    - [NPM](#npm)\n  - [Webpack Setup](#webpack-setup)\n  - [import](#import)\n  - [Usage](#usage)\n\n## Quick install\n\n### NPM\n\n```sh\nnpm install bulma-variables-export\n```\n\n## Webpack Setup\n\nWhen working with Javascript/Typescript and Sass, sometimes you want to be able to share variables defined in stylesheets with your code. This is actually pretty simple with Webpack.\n\nFirst make sure webpack is set up to import scss:\n\n```javascript\n// webpack.config.js\nmodule.exports = {\n  ...\n  module: {\n    rules: [{\n      test: /\\.scss$/,\n      use: [{\n        loader: \"style-loader\" // creates style nodes from JS strings\n      }, {\n        loader: \"css-loader\" // translates CSS into CommonJS\n      }, {\n        loader: \"sass-loader\" // compiles Sass to CSS\n      }]\n    }]\n  }\n};\n```\n\n## import\n\nNow you can import any Bulma variables in your project.\n\nYou can import every variables using:\n\n```javascript\nimport variables from 'bulma-variables-export'\n```\n\nYou can also import specific set of variables using:\n\n```javascript\nimport initialVariables from 'bulma-variables-export/sass/initial-variables.scss'\nimport derivedVariables from 'bulma-variables-export/sass/derived-variables.scss'\nimport controlsVariables from 'bulma-variables-export/sass/controls-variables.scss'\n```\n\n## Usage\n\nUsage in your code is very simple. The variables name are exactly defined as Bulma but in camelCase.\n\n```javascript\nimport variables from 'bulma-variables-export'\n// *OR*\n// variables = require('bulma-variables-export');\n\nconsole.log(variables.black)\nconsole.log(variables.familyMonospace)\nconsole.log(variables.weightMedium)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fservice-paradis%2Fbulma-variables-export","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fservice-paradis%2Fbulma-variables-export","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fservice-paradis%2Fbulma-variables-export/lists"}