{"id":15041699,"url":"https://github.com/debens/gatsby-plugin-scss-typescript","last_synced_at":"2025-04-14T20:23:04.906Z","repository":{"id":34158600,"uuid":"170722363","full_name":"Debens/gatsby-plugin-scss-typescript","owner":"Debens","description":"GatsbyJS plugin for using SCSS Modules and generating Typescript declaration files 🛠️","archived":false,"fork":false,"pushed_at":"2023-01-07T04:23:03.000Z","size":1381,"stargazers_count":9,"open_issues_count":15,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T08:41:26.050Z","etag":null,"topics":["gatsby","gatsby-plugin","sass","scss","typescript","webpack"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Debens.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-14T16:29:41.000Z","updated_at":"2022-10-17T16:12:31.000Z","dependencies_parsed_at":"2023-01-15T04:58:41.535Z","dependency_job_id":null,"html_url":"https://github.com/Debens/gatsby-plugin-scss-typescript","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debens%2Fgatsby-plugin-scss-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debens%2Fgatsby-plugin-scss-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debens%2Fgatsby-plugin-scss-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debens%2Fgatsby-plugin-scss-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Debens","download_url":"https://codeload.github.com/Debens/gatsby-plugin-scss-typescript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952959,"owners_count":21188526,"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","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":["gatsby","gatsby-plugin","sass","scss","typescript","webpack"],"created_at":"2024-09-24T20:46:23.266Z","updated_at":"2025-04-14T20:23:04.883Z","avatar_url":"https://github.com/Debens.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003egatsby-plugin-scss-typescript\u003c/h1\u003e\n  🛠️\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://circleci.com/gh/Debens/gatsby-plugin-scss-typescript\"\u003e\u003cimg src=\"https://circleci.com/gh/Debens/gatsby-plugin-scss-typescript.svg?style=shield\u0026circle-token=2d506be7c3ec07e440056881ce5c376f7618f214)\" alt=\"CircleCI\"/\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/gatsby-plugin-scss-typescript\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/gatsby-plugin-scss-typescript.svg\" alt=\"NPM Version\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/gatsby-plugin-scss-typescript\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/gatsby-plugin-scss-typescript.svg\" alt=\"npm\" /\u003e\u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/min/gatsby-plugin-scss-typescript.svg\" alt=\"npm bundle size\" /\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/gatsby-plugin-scss-typescript.svg\" alt=\"License\" /\u003e\n\u003c/p\u003e\n\n\u003chr /\u003e\n\nIncludes Gatsby V2 drop-in webpack support for SCSS stylesheets modules \u0026 automatic generation of accompanying typing declaration (`.d.ts`) files.\n\n## Install\n\n`yarn add --dev sass gatsby-plugin-scss-typescript`\n\nor\n\n`npm install --save-dev sass gatsby-plugin-scss-typescript`\n\n## Usage\n\n1.  Include the plugin in your `gatsby-config.js` file.\n\n```javascript\n// gatsby-config.js\nplugins: ['gatsby-plugin-scss-typescript'];\n```\n\n2.  Write your SCSS, import \u0026 use them as normal.\n\n```javascript\n// component.ts\nimport * as styles from './styles.module.scss';\n```\n\nOnly files that include the `.module.scss` extensions shall be treated as module files, and hence have typings generated at build time. `.scss` files shall be loaded using the regular [css-loader](https://github.com/webpack-contrib/css-loader) with no additional magic.\n\n## Options\n\nThe default gatsby rule loaders are used where possible, see the [gatsby webpack utils](https://github.com/gatsbyjs/gatsby/blob/0deda7b5646b3eb8db1b1873faf13553311c4878/packages/gatsby/src/utils/webpack-utils.js) for more info.\n\n## declartionOptions\n\nThe `declarationOptions` key is passed to [typings-for-css-modules-loader](https://github.com/TeamSupercell/typings-for-css-modules-loader#options).\n\n### cssLoaderOptions\n\nThe `cssLoaderOptions` key is passed to the [css-loader](https://github.com/webpack-contrib/css-loader), with a few [defaults](https://github.com/gatsbyjs/gatsby/blob/0deda7b5646b3eb8db1b1873faf13553311c4878/packages/gatsby/src/utils/webpack-utils.js#L392-L403) from gatsby.\n\n### sassLoaderOptions\n\nThe `sassLoaderOptions` key is passed to the [sass-loader](https://github.com/webpack-contrib/sass-loader).\n\n### cssMinifyOptions\n\nThe `cssMinifyOptions` key is passed to the [OptimizeCssAssetsPlugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin).\n\n### cssExtractOptions\n\nThe `cssExtractOptions` key is passed to the [MiniCssExtractPlugin](https://github.com/gatsbyjs/gatsby/blob/0deda7b5646b3eb8db1b1873faf13553311c4878/packages/gatsby/src/utils/webpack-utils.js#L482-L487).\n\n### Example\n\n```javascript\n// in gatsby-config.js\nplugins: [\n    {\n        resolve: 'gatsby-plugin-scss-typescript',\n        options: {\n            cssLoaderOptions: {\n                importLoaders: 1,\n                localIdentName: '[name]_[local]___[contenthash:base64:5]_[emoji:1]',\n            },\n            sassLoaderOptions: {\n                includePaths: [path.resolve(__dirname, './src/styles/scss')],\n            },\n            cssMinifyOptions: {\n                assetNameRegExp: /\\.optimize\\.css$/g,\n                canPrint: true,\n            },\n            cssExtractOptions: {\n                filename: '[name].css',\n                chunkFilename: '[id].css',\n            },\n        },\n    },\n];\n```\n\n### FAQs\n\n#### \u003cu\u003eThe plugin has generated a bunch of `.d.ts` files?!\u003c/u\u003e\n\nFirstly, thats not really a question, but we can take a stab at it.\n\nYes, it does generate a bunch of files, one for each `.module.scss` file imported by a react component.\n\n#### \u003cu\u003eWhat do the `.d.ts` file do?\u003c/u\u003e\n\nThats better as a question. These are [Typescript declaration files](https://microsoft.github.io/TypeScript-New-Handbook/chapters/type-declarations/), they essentially describe a js module, such that TS can expect the details that are declared.\n\nIn this case they are describing what the scss will look like once it has been turned into a js module.\n\nThis is what is happening under the surface, when you write:\n\n```ts\nimport styles from './styles.module.scss';\n```\n\nYou are importing a js module that can be transpiled from your scss using a [webpack loader](https://webpack.js.org/loaders/).\n\n#### \u003cu\u003eDo I need these declaration files?\u003c/u\u003e\n\nNo.\n\nWell, maybe. You can have type safe css without these declaration files using [typescript-plugin-css-modules](https://github.com/mrmckeb/typescript-plugin-css-modules) in your `tsconfig.json`.\n\nFor those who prefer to throw caution to the wind, you can use this:\n\n```ts\ndeclare module '*.scss' {\n    const content: { [className: string]: string };\n\n    export default content;\n}\n```\n\nYou animal. 🦁\n\n#### \u003cu\u003eI'm not seeing any files being created?\u003c/u\u003e\u003ca name=\"no_files\"\u003e\u003c/a\u003e\n\nMake sure your file are suffixed with `.module.scss`, the plugin won't generate declarations for regular `.scss` files by design. This is to give the most power to you!\n\n#### \u003cu\u003eDo I need any other gatsby plugins to enable scss with my project?\u003c/u\u003e\n\nNo, and make sure you don't have other scss plugins like `gatsby-plugin-sass` installed, they'll just disagree. `gatsby-plugin-scss-typescript` achieves the same thing plus the type generation.\n\nYou will need `sass` as a dependency of your project though!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebens%2Fgatsby-plugin-scss-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdebens%2Fgatsby-plugin-scss-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebens%2Fgatsby-plugin-scss-typescript/lists"}