{"id":20616,"library":"to-string-loader","title":"to-string-loader","description":"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.","status":"maintenance","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/gajus/to-string-loader","tags":["javascript","webpack","to-string"],"install":[{"cmd":"npm install to-string-loader","lang":"bash","label":"npm"},{"cmd":"yarn add to-string-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add to-string-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for webpack loader utils","package":"loader-utils","optional":false},{"reason":"peer dependency; loader is meant to be used with webpack","package":"webpack","optional":false}],"imports":[{"note":"Loader is typically not imported directly; it's referenced in webpack config as 'to-string'.","wrong":"import { toString } from 'to-string-loader'","symbol":"default","correct":"import toString from 'to-string-loader'"},{"note":"Use inline syntax with preceding loaders like css and sass.","wrong":"let output = require('to-string!./my.scss');","symbol":"require (runtime usage)","correct":"let output = require('to-string!css!sass!./my.scss');"},{"note":"In webpack config, omit the '-loader' suffix; webpack resolves it automatically.","wrong":"loaders: ['to-string-loader', 'css', 'sass']","symbol":"webpack config loader","correct":"loaders: ['to-string', 'css', 'sass']"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    loaders: [\n      {\n        test: /\\.scss$/,\n        loaders: ['to-string', 'css', 'sass']\n      }\n    ]\n  }\n};\n\n// In your code (e.g., Angular component)\n@Component({\n  styles: [require('./my.scss')] // now returns a string\n})\nexport class MyComponent {}\n\n// Or inline:\nlet style = require('to-string!css!sass!./my.scss');","lang":"javascript","description":"Configures webpack to convert SASS output to string using to-string-loader."},"warnings":[{"fix":"Replace with 'css-to-string-loader' or 'raw-loader' in modern webpack setups.","message":"Package has not been updated since 2016; consider using css-to-string-loader or raw-loader.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure loaders order is: ['to-string', 'css', 'sass'].","message":"Loader must be placed before css and sass in the loaders array, or the order is wrong.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add sass-loader to loaders: ['to-string', 'css', 'sass'].","cause":"Missing sass-loader before to-string-loader in loaders array.","error":"Module parse failed: Unexpected character '@' (1:0)"},{"fix":"Run: npm install --save-dev to-string-loader","cause":"Module not installed.","error":"Cannot find module 'to-string-loader'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}