{"id":28052,"library":"postcss-import-webpack-resolver","title":"postcss-import-webpack-resolver","description":"Creates a custom resolve function for postcss-import using webpack's enhanced-resolve, enabling the use of webpack aliases and module resolution in CSS @import statements. Current stable version 1.0.1, no recent updates. It bridges postcss-import with webpack's resolver, allowing CSS files to resolve modules via webpack aliases, modules directories, and other enhanced-resolve options. Different from using postcss-import alone, which relies on Node.js module resolution; this package provides tighter integration with webpack configuration.","status":"abandoned","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/krambuhl/postcss-import-webpack-resolver","tags":["javascript","webpack","postcss-import","resolver","postcss"],"install":[{"cmd":"npm install postcss-import-webpack-resolver","lang":"bash","label":"npm"},{"cmd":"yarn add postcss-import-webpack-resolver","lang":"bash","label":"yarn"},{"cmd":"pnpm add postcss-import-webpack-resolver","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency used internally for file resolution; must be installed alongside.","package":"enhanced-resolve"},{"reason":"Peer dependency; this package provides a resolve function for postcss-import.","package":"postcss-import"}],"imports":[{"note":"Default export, CommonJS require works with const createResolver = require('postcss-import-webpack-resolver')","wrong":"const createResolver = require('postcss-import-webpack-resolver').default","symbol":"createResolver","correct":"import createResolver from 'postcss-import-webpack-resolver'"}],"quickstart":{"code":"const cssImport = require('postcss-import');\nconst createResolver = require('postcss-import-webpack-resolver');\nconst webpackConfig = { resolve: { alias: { '@': '/src' }, modules: ['node_modules'] } };\nconst plugins = [\n  cssImport({\n    resolve: createResolver({\n      alias: webpackConfig.resolve.alias,\n      modules: webpackConfig.resolve.modules\n    })\n  })\n];\n// Use with PostCSS","lang":"javascript","description":"Example of creating a resolver with webpack aliases and modules for postcss-import."},"warnings":[{"fix":"Consider using postcss-import's built-in resolver or other alternatives like postcss-import-resolver.","message":"Package is unmaintained since 2017 and may not work with modern webpack versions.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure enhanced-resolve version compatibility; check enhanced-resolve docs for option changes.","message":"Options passed to createResolver are passed directly to enhanced-resolve's ResolverFactory, which may have breaking changes across versions.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use webpack 5's built-in CSS resolution or a compatible resolver.","message":"Does not support webpack 5's new resolver options like 'exports' field.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Run npm install enhanced-resolve --save-dev","cause":"enhanced-resolve is a peer dependency not installed.","error":"Error: Cannot find module 'enhanced-resolve'"},{"fix":"Use const createResolver = require('postcss-import-webpack-resolver') (CommonJS) or import createResolver from 'postcss-import-webpack-resolver' (ESM).","cause":"Incorrect import; trying to destructure or use default incorrectly.","error":"TypeError: createResolver is not a function"},{"fix":"Check that alias paths and modules directories are correctly specified and exist.","cause":"Alias or modules not properly configured in createResolver options.","error":"Module not found: Error: Can't resolve '...' in '...'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}