Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@webpack-blocks/sass

Package Overview
Dependencies
Maintainers
2
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@webpack-blocks/sass

Webpack block for SASS.

  • 2.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

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.

Keywords

FAQs

Package last updated on 27 Apr 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc