{"id":20586,"library":"stylus-loader","title":"stylus-loader","description":"Webpack loader that compiles Stylus (.styl) files into CSS. Current stable version is 8.1.3, released February 2026, with regular bugfix updates. Maintained by the webpack team. Key differentiator: first-class webpack integration, supports webpack resolve and loaders, optional Rspack compatibility since v8.1.0, and incremental build optimization. Requires Node.js >=18.12.0 (v8) and Stylus >=0.52.4 as a peer dependency. Alternatives like stylus itself require separate CLI usage or manual integration.","status":"active","version":"8.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/webpack/stylus-loader","tags":["javascript","webpack","loader","stylus"],"install":[{"cmd":"npm install stylus-loader","lang":"bash","label":"npm"},{"cmd":"yarn add stylus-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add stylus-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Compiles Stylus to CSS","package":"stylus","optional":false},{"reason":"Loader integration","package":"webpack","optional":false}],"imports":[{"note":"CommonJS require works but default export is typically used as loader string, not imported programmatically.","wrong":"const stylusLoader = require('stylus-loader')","symbol":"StylusLoader","correct":"import stylusLoader from 'stylus-loader'"},{"note":"Both work, but 'loader' is more concise when no other loaders are chained.","wrong":"{\n  test: /\\.styl$/,\n  use: 'stylus-loader'\n}","symbol":"Webpack config","correct":"{\n  test: /\\.styl$/,\n  loader: 'stylus-loader'\n}"},{"note":"Stylus options must be nested under 'stylusOptions' key, not flattened.","wrong":"{\n  test: /\\.styl$/,\n  use: [{\n    loader: 'stylus-loader',\n    options: { /* stylus options directly */ }\n  }]\n}","symbol":"stylusOptions","correct":"{\n  test: /\\.styl$/,\n  use: [{\n    loader: 'stylus-loader',\n    options: {\n      stylusOptions: { /* ... */ }\n    }\n  }]\n}"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\nmodule.exports = {\n  mode: 'development',\n  entry: './src/style.styl',\n  output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },\n  module: {\n    rules: [\n      {\n        test: /\\.styl$/,\n        use: [\n          { loader: 'style-loader' },\n          { loader: 'css-loader', options: { sourceMap: true } },\n          { loader: 'stylus-loader', options: { stylusOptions: { compress: false } } }\n        ]\n      }\n    ]\n  }\n};","lang":"javascript","description":"Basic webpack configuration to load Stylus files with style-loader, css-loader, and stylus-loader, including source maps."},"warnings":[{"fix":"Upgrade to Node.js 18.12.0 or higher","message":"Node.js version requirement raised","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Wrap Stylus options in `stylusOptions: { ... }`","message":"Stylus options must be nested under `stylusOptions`","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"Use Stylus >=0.52.4","message":"Minimum Stylus version requirement","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Use array syntax for `define`: [[key, value, raw]]","message":"`define` option as an object is deprecated","severity":"deprecated","affected_versions":">=7.0.0"},{"fix":"Use `lineNumbers` instead of `line-numbers`, etc.","message":"Options in dash-case must be camelCase","severity":"gotcha","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install stylus --save-dev","cause":"Stylus is not installed or not a peer dependency","error":"Error: Module build failed (from ./node_modules/stylus-loader/dist/cjs.js):\nTypeError: Cannot read properties of undefined (reading 'stylus')"},{"fix":"Upgrade Node.js to 18.12.0+","cause":"Using stylus-loader v8 with older Node.js","error":"Error: Node.js version 14.15.0 is not supported. Please upgrade to Node.js 18.12.0 or higher."},{"fix":"Change to array: `define: [['var', value, raw]]`","cause":"Using object syntax for `define` in stylusOptions","error":"Warning: The define option as an object is deprecated. Use array syntax."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}