Skip to main content
View plugin on GitHub
See starters using this

gatsby-plugin-scss-typescript

🛠️

NPM Version npm npm bundle size License


Includes Gatsby V2 webpack support for SCSS stylesheets modules and automatic generation of accompanying typing declaration (.d.ts) files.

Install

yarn add --dev gatsby-plugin-scss-typescript node-sass

or

npm install --save-dev gatsby-plugin-scss-typescript node-sass

NOTE: From v4.0.0, node-sass has been moved to a peer dependency.

Usage

  1. Include the plugin in your gatsby-config.js file.
// gatsby-config.js
plugins: ['gatsby-plugin-scss-typescript'];
  1. Write your SCSS, import & use them as normal.
// component.ts
import * as styles from './styles.module.scss';

Only 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.

Options

The default gatsby rule loaders are used where possible, see the gatsby webpack utils for more info.

cssLoaderOptions

The cssLoaderOptions key is passed to the css-loader, with a few defaults from gatsby.

sassLoaderOptions

The sassLoaderOptions key is passed to the sass-loader.

cssMinifyOptions

The cssMinifyOptions key is passed to the OptimizeCssAssetsPlugin.

cssExtractOptions

The cssExtractOptions key is passed to the MiniCssExtractPlugin.

Example

// in gatsby-config.js
plugins: [
    {
        resolve: 'gatsby-plugin-scss-typescript',
        options: {
            cssLoaderOptions: {
                importLoaders: 1,
                localIdentName: '[name]_[local]___[hash:base64:5]_[emoji:1]',
            },
            sassLoaderOptions: {
                includePaths: [path.resolve(__dirname, './src/styles/scss')],
            },
            cssMinifyOptions: {
                assetNameRegExp: /\.optimize\.css$/g,
                canPrint: true,
            },
            cssExtractOptions: {
                filename: '[name].css',
                chunkFilename: '[id].css',
            },
        },
    },
];

Docs
Tutorials
Plugins
Blog
Showcase