to-string-loader

1.2.0 verified Sat Apr 25 auth: no javascript maintenance

Webpack loader that converts CSS/SASS compiled output from an array to a plain string, useful for frameworks like Angular that require styles as strings. Current stable version: 1.2.0 (last released 2016-10-15). No recent updates; primarily used in legacy Angular 2 projects. Alternative: css-to-string-loader or raw-loader for similar functionality. Works with webpack 1-2; compatibility with webpack 3+ is unclear.

Common errors

error Module parse failed: Unexpected character '@' (1:0) ↓

cause Missing sass-loader before to-string-loader in loaders array.

fix

Add sass-loader to loaders: ['to-string', 'css', 'sass'].

error Cannot find module 'to-string-loader' ↓

cause Module not installed.

fix

Run: npm install --save-dev to-string-loader

Warnings

deprecated Package has not been updated since 2016; consider using css-to-string-loader or raw-loader. ↓

fix Replace with 'css-to-string-loader' or 'raw-loader' in modern webpack setups.

gotcha Loader must be placed before css and sass in the loaders array, or the order is wrong. ↓

fix Ensure loaders order is: ['to-string', 'css', 'sass'].

Install

npm install to-string-loader

yarn add to-string-loader

pnpm add to-string-loader

Imports

default
wrong
```
import { toString } from 'to-string-loader'
```
correct
```
import toString from 'to-string-loader'
```
Loader is typically not imported directly; it's referenced in webpack config as 'to-string'.

require (runtime usage)

wrong

let output = require('to-string!./my.scss');

correct

let output = require('to-string!css!sass!./my.scss');

Use inline syntax with preceding loaders like css and sass.

webpack config loader
wrong
```
loaders: ['to-string-loader', 'css', 'sass']
```
correct
```
loaders: ['to-string', 'css', 'sass']
```
In webpack config, omit the '-loader' suffix; webpack resolves it automatically.

Quickstart

Configures webpack to convert SASS output to string using to-string-loader.

// webpack.config.js
module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ['to-string', 'css', 'sass']
      }
    ]
  }
};

// In your code (e.g., Angular component)
@Component({
  styles: [require('./my.scss')] // now returns a string
})
export class MyComponent {}

// Or inline:
let style = require('to-string!css!sass!./my.scss');