webpack-blocks - Sass


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

Usage

``js
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

$3

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


`js
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.

$3

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


`js
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()
])
])
`


$3

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.


`js
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.