Nunjucks Powers Mozilla

    @webpack-blocks/sass
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/webpack-blocks__sass package

    2.1.0 • Public • Published

    webpack-blocks - Sass

    Gitter chat NPM Version

    This is the sass block providing Sass support for webpack. Uses node-sass via sass-loader.

    Usage

    const { createConfig, match } = require('@webpack-blocks/webpack')
    const { css } = require('@webpack-blocks/assets')
    const sass = require('@webpack-blocks/sass')
    
    module.exports = createConfig([
      match(['*.scss', '!*node_modules*'], [
        css(),
        sass({ sassOptions: {/* node-sass options */} })
      ])
    ])

    NOTE: Use match() here to apply the css() block to .scss files.

    Options

    You can pass any sass-loader as an object to the sass block. For example you can pass node-sass options in the sassOptions property.

    Examples

    Extract text plugin

    Use the extract-text block to extract the compiled SASS/SCSS styles into a separate CSS file:

    const { createConfig, match, env } = require('@webpack-blocks/webpack')
    const { css } = require('@webpack-blocks/assets')
    const sass = require('@webpack-blocks/sass')
    const extractText = require('@webpack-blocks/extract-text')
    
    module.exports = createConfig([
      match('*.scss', [
        css(),
        sass(),
        env('production', [extractText()])
      ])
    ])

    Make sure you use the extract-text block after the sass block.

    CSS Modules

    You can use SASS/SCSS in combination with CSS modules.

    const { createConfig, match } = require('@webpack-blocks/webpack')
    const { css } = require('@webpack-blocks/assets')
    const sass = require('@webpack-blocks/sass')
    
    module.exports = createConfig([
      match('*.scss', [
        css.modules(),
        sass()
      ])
    ])

    PostCSS

    You can use the SASS block together with PostCSS (using the postcss block) and its plugins, like the Autoprefixer, or cssnano if you want css minification.

    const { createConfig, match } = require('@webpack-blocks/webpack')
    const { css } = require('@webpack-blocks/assets')
    const sass = require('@webpack-blocks/sass')
    const postcss = require('@webpack-blocks/postcss')
    const autoprefixer = require('autoprefixer')
    const cssnano = require('cssnano')
    
    module.exports = createConfig([
      match('*.scss', [
        css(),
        sass(),
        postcss([autoprefixer(), cssnano()])
      ])
    ])

    webpack-blocks

    Check out the

    👉 Main documentation

    Released under the terms of the MIT license.

    Install

    npm i @webpack-blocks/sass

    DownloadsWeekly Downloads

    1,037

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    8.44 kB

    Total Files

    6

    Last publish

    Collaborators

    • andywer
    • webpack-blocks-andy