{"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,"search_vec":"'-10':36 '-15':37 '-2':65 '1':64 '1.2.0':32 '2':46 '2016':35 '3':69 'altern':48 'angular':23,45 'array':14 'compat':66 'compil':10 'convert':8 'css':50 'css-to-string-load':49 'css/sass':9 'current':29 'framework':21 'function':60 'javascript':72 'last':33 'legaci':44 'like':22 'loader':4,6,53,57 'output':11 'plain':17 'primarili':41 'project':47 'raw':56 'raw-load':55 'recent':39 'releas':34 'requir':25 'similar':59 'stabl':30 'string':3,18,28,52,76 'style':26 'to-str':74 'to-string-load':1 'unclear':71 'updat':40 'use':19,42 'version':31 'webpack':5,63,68,73 'work':61","created_at":"2026-04-25T11:24:03.683003+00:00","updated_at":"2026-04-25T11:24:03.683003+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/gajus/to-string-loader","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/to-string-loader","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}