# to-string-loader

> to-string loader for webpack

Latest version **1.2.0** (published 2021-10-18) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install to-string-loader
pnpm add to-string-loader
yarn add to-string-loader
bun add to-string-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.2.0 |
| Published | 2021-10-18 |
| First published | 2015-07-17 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 65 |
| Author | Gajus Kuizinas |
| Maintainers | gajus |
| Keywords | webpack, to-string |

## Links

- npm: https://www.npmjs.com/package/to-string-loader
- Repository: https://github.com/gajus/to-string-loader
- Homepage: https://github.com/gajus/to-string-loader#readme
- Issues: https://github.com/gajus/to-string-loader/issues
- npm.io page: https://npm.io/package/to-string-loader

## Dependencies (1)

- [loader-utils](https://npm.io/package/loader-utils.md) ^1.0.0

## Alternatives

- [@mce/gif](https://npm.io/package/@mce/gif.md) — 2.6K weekly downloads
- [cleanse](https://npm.io/package/cleanse.md) — 173 weekly downloads
- [str](https://npm.io/package/str.md) — 127 weekly downloads
- [naming](https://npm.io/package/naming.md) — 95 weekly downloads
- [tap-telco-api](https://npm.io/package/tap-telco-api.md) — 19 weekly downloads

## Recent versions

- 1.2.0 (latest) — 2021-10-18
- 1.1.6 — 2019-11-13
- 1.1.5 — 2016-09-18
- 1.1.4 — 2016-05-04
- 1.1.3 — 2015-07-17
- 1.1.2 — 2015-07-17
- 1.1.1 — 2015-07-17
- 1.1.0 — 2015-07-17
- 1.0.0 — 2015-07-17

## README

# to-string loader for webpack

## Usage

```js
let output = require('to-string!css!sass!./my.scss');
// => returns sass rendered to CSS a string
```

Don't forget to polyfill `require` if you want to use it in node.

See `webpack` documentation.

## Use Case

If you setup a SASS loader:

```js
{
    test: /\.scss$/,
    loaders: [
        'css',
        'sass'
    ]
},
```

then `require('./my.scss')` will return an `Array` object:

```
0: Array[3]
    0: 223
    1: "html,↵body,↵ol,↵ul,↵li,↵p { margin: 0; padding: 0; }↵"
    2: ""
    length: 3
i: (modules, mediaQuery) { .. }
length: 1
toString: toString()
```

In some cases (e.g. Angular2 [@View styles definition](https://github.com/angular/angular/blob/2e4a2a0e5a2fb5b5c531f16db88d00423ea582fc/modules/angular2/src/core/annotations_impl/view.ts#L58)) you need to have style as a string.

You can cast the require output to a string, e.g.

```js
@View({
    directives: [RouterOutlet, RouterLink],
    template: require('./app.html'),
    styles: [
        require('./app.scss').toString()
    ]
})
```

or you can use `to-string` loader that will do that for you:

```js
{
    test: /\.scss$/,
    loaders: [
        'to-string',
        'css',
        'sass'
    ]
},
```

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