{"id":20577,"library":"style-loader","title":"style-loader","description":"Webpack loader that injects CSS into the DOM by appending <style> or <link> tags. Version 4.0.0 (April 2024) requires webpack 5.27+ and Node.js 18.12+. Commonly paired with css-loader for development workflows. Supports multiple injection strategies (styleTag, singletonStyleTag, lazyStyleTag, linkTag) and can use CSS modules. Not recommended for production without additional configuration (e.g., ExtractTextPlugin). Maintained by the webpack-contrib team with regular updates.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/webpack-contrib/style-loader","tags":["javascript","webpack"],"install":[{"cmd":"npm install style-loader","lang":"bash","label":"npm"},{"cmd":"yarn add style-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add style-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency; style-loader is a webpack loader and only works within a webpack build pipeline.","package":"webpack","optional":false}],"imports":[{"note":"style-loader is used as a webpack loader, not imported directly in application code. Configure it in webpack.config.js.","wrong":"const styleLoader = require('style-loader'); // Not how loaders are typically imported","symbol":"style-loader","correct":"// In webpack config: use 'style-loader' as a string in the 'use' array\nmodule.exports = { module: { rules: [{ test: /\\.css$/i, use: ['style-loader', 'css-loader'] }] } };"},{"note":"String form is shorthand; object form allows options. Both are correct.","wrong":"use: [{ loader: 'style-loader' }, { loader: 'css-loader' }] // Correct object form, but wrong if using 'use' as an import","symbol":"use","correct":"use: ['style-loader', 'css-loader']"},{"note":"Options are passed via the loader object. Cannot use string form when specifying options.","wrong":"use: ['style-loader', { loader: 'style-loader', options: { injectType: 'singletonStyleTag' } }] // Duplicate loader entry","symbol":"options","correct":"use: [{ loader: 'style-loader', options: { injectType: 'singletonStyleTag' } }]"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: ['style-loader', 'css-loader']\n      }\n    ]\n  },\n  mode: 'development'\n};","lang":"javascript","description":"Basic webpack configuration using style-loader and css-loader to bundle CSS into a JavaScript bundle."},"warnings":[{"fix":"Upgrade webpack to >=5.27.0 and Node.js to >=18.12.0.","message":"Breaking change in v4: minimum supported webpack version is 5.27.0 and Node.js version is 18.12.0.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Remove 'modules.namedExport' from style-loader options; configure CSS modules in css-loader instead.","message":"The 'modules.namedExport' option was removed in v4. Use 'css-loader' options for CSS modules.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Use MiniCssExtractPlugin for production builds instead of style-loader.","message":"style-loader is not safe for production by default; it injects styles dynamically which can cause performance issues and FOUC.","severity":"gotcha","affected_versions":"*"},{"fix":"Use 'styleTag' (default) or 'linkTag' if source maps are needed.","message":"Source maps do not work with 'singletonStyleTag' injectType.","severity":"gotcha","affected_versions":"*"},{"fix":"If you used an inline function for 'insert', move it to a separate module and reference its path.","message":"In v4, the 'insert' option can only be a CSS selector or a path to a module exporting a function; inline function definitions are no longer allowed.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Use `import * as styles from './styles.css'` and access classes via `styles['my-class']`.","message":"When using CSS modules with style-loader, all local class names are exported as named exports from the CSS file.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev style-loader` to install the package.","cause":"style-loader is not installed.","error":"Module not found: Error: Can't resolve 'style-loader'"},{"fix":"Add 'css-loader' to the use array: use: ['style-loader', 'css-loader']","cause":"Missing css-loader in the webpack config.","error":"Error: 'style-loader' without 'css-loader' will not work"},{"fix":"Use a CSS selector string or a path to a module that exports the insert function.","cause":"Using an inline function for the 'insert' option in style-loader v4.","error":"TypeError: Cannot read properties of undefined (reading 'indexOf')","affected_versions":">=4.0.0"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}