sass

webpack-blocks - Sass

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.