{"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,"search_vec":"'0.52.4':57 '18.12.0':53 '2026':20 '8.1.3':17 'altern':62 'bugfix':23 'build':49 'class':34 'cli':68 'compat':44 'compil':7 'css':12 'current':13 'depend':61 'differenti':31 'februari':19 'file':10 'first':33 'first-class':32 'increment':48 'integr':36,72 'javascript':73 'key':30 'like':63 'loader':3,5,41,75 'maintain':25 'manual':71 'node.js':52 'optim':50 'option':42 'peer':60 'regular':22 'releas':18 'requir':51,66 'resolv':39 'rspack':43 'separ':67 'sinc':45 'stabl':14 'styl':9 'stylus':2,8,56,64,76 'stylus-load':1 'support':37 'team':29 'updat':24 'usag':69 'v8':54 'v8.1.0':46 'version':15 'webpack':4,28,35,38,74","created_at":"2026-04-25T11:23:54.618545+00:00","updated_at":"2026-04-25T11:23:54.618545+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://webpack.js.org/loaders/stylus-loader/","github":"https://github.com/webpack/stylus-loader","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/stylus-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}}