# postcss-sass-loader

> PostCSS Loader Loader for webpack to process SASS with PostCSS

Latest version **1.1.0** (published 2019-02-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install postcss-sass-loader
pnpm add postcss-sass-loader
yarn add postcss-sass-loader
bun add postcss-sass-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2019-02-03 |
| First published | 2019-01-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 13.2 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | shaoyudong |
| Maintainers | shaoyudong |
| Keywords | css, sass, postcss, webpack, webpack-loader |

## Links

- npm: https://www.npmjs.com/package/postcss-sass-loader
- Repository: https://github.com/shaoyudong/postcss-sass-loader
- Issues: https://github.com/shaoyudong/postcss-sass-loader/issues
- npm.io page: https://npm.io/package/postcss-sass-loader

## Dependencies (7)

- [postcss](https://npm.io/package/postcss.md) ^7.0.11
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3
- [postcss-scss](https://npm.io/package/postcss-scss.md) ^2.0.0
- [schema-utils](https://npm.io/package/schema-utils.md) ^1.0.0
- [postcss-import](https://npm.io/package/postcss-import.md) ^12.0.1
- [postcss-load-config](https://npm.io/package/postcss-load-config.md) ^2.0.0
- [@csstools/postcss-sass](https://npm.io/package/@csstools/postcss-sass.md) ^4.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2019-02-03
- 0.1.0 — 2019-01-23
- 0.1.0-beta.4 — 2019-01-21
- 0.1.0-beta.3 — 2019-01-18
- 0.1.0-beta.2 — 2019-01-17
- 0.1.0-beta.1 — 2019-01-17
- 0.1.0-beta.0 — 2019-01-17

## README

<div align="center">
  <h1>PostCSS Loader</h1>
  <p>Loader for <a href="https://webpack.js.org/">webpack</a> to process SASS with <a href="https://postcss.org/">PostCSS</a></p>
</div>

<h2 align="center">Install</h2>

```bash
npm i -D postcss-sass-loader
```

<h2 align="center">Usage</h2>

### `Configuration`

**`postcss.config.js`**
```js
module.exports = {
  plugins: [
      require('autoprefixer')
  ]
}
```

**`webpack.config.js`**
```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ca]ss$/,
        use: [ 'style-loader', 'css-loader', 'postcss-sass-loader' ]
      }
    ]
  }
}
```

**`webpack.config.js` (recommended)**
```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { alias: { "@test": "/home/test"} } },
          'postcss-sass-loader'
        ]
      }
    ]
  }
}
```

<h2 align="center">Options</h2>

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|[`config`](#config)|`{Object}`|`undefined`|Set `postcss.config.js` config path && `ctx`|
|[`plugins`](#plugins)|`{Array\|Function}`|`[]`|Set PostCSS Plugins|
|[`sourceMap`](#sourcemap)|`{String\|Boolean}`|`false`|Enable Source Maps|
|[`alias`](#alias)|`{Object}`|`undefined`|Set import alias|

### `Plugins`

**`webpack.config.js`**
```js
{
  loader: 'postcss-sass-loader',
  options: {
    ident: 'postcss',
    plugins: (loader) => [
      require('postcss-import')({ root: loader.resourcePath }),
      require('postcss-preset-env')(),
      require('cssnano')()
    ]
  }
}
```

### `alias`

**`webpack.config.js`**
```js
{
  test: /\.s[ca]ss$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-sass-loader',
      options: {
        alias: {
            "@test": "/home/test"
        }
      }
    }
  ]
}
```

> ⚠️  webpack requires an identifier (`ident`) in `options` when `{Function}/require` is used (Complex Options). The `ident` can be freely named as long as it is unique. It's recommended to name it (`ident: 'postcss'`)

<h2 align="center">Examples</h2>

### `Autoprefixing`

**`webpack.config.js`**
```js
{
  test: /\.s[ca]ss$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-sass-loader',
      options: {
        plugins: [
          require('autoprefixer')({...options}),
          ...,
        ]
      }
    }
  ]
}
```

---
_Source: https://npm.io/package/postcss-sass-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._