This is the sass
block providing Sass support for webpack. Uses node-sass
via sass-loader
.
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.
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.
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.
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()
])
])
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()])
])
])
Check out the
Released under the terms of the MIT license.