postcss-import-webpack-resolver

1.0.1 verified Sat May 09 auth: no javascript abandoned

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.

Common errors

error Error: Cannot find module 'enhanced-resolve' ↓

cause enhanced-resolve is a peer dependency not installed.

fix

Run npm install enhanced-resolve --save-dev

error TypeError: createResolver is not a function ↓

cause Incorrect import; trying to destructure or use default incorrectly.

fix

Use const createResolver = require('postcss-import-webpack-resolver') (CommonJS) or import createResolver from 'postcss-import-webpack-resolver' (ESM).

error Module not found: Error: Can't resolve '...' in '...' ↓

cause Alias or modules not properly configured in createResolver options.

fix

Check that alias paths and modules directories are correctly specified and exist.

Warnings

deprecated Package is unmaintained since 2017 and may not work with modern webpack versions. ↓

fix Consider using postcss-import's built-in resolver or other alternatives like postcss-import-resolver.

gotcha Options passed to createResolver are passed directly to enhanced-resolve's ResolverFactory, which may have breaking changes across versions. ↓

fix Ensure enhanced-resolve version compatibility; check enhanced-resolve docs for option changes.

breaking Does not support webpack 5's new resolver options like 'exports' field. ↓

fix Use webpack 5's built-in CSS resolution or a compatible resolver.

Install

npm install postcss-import-webpack-resolver

yarn add postcss-import-webpack-resolver

pnpm add postcss-import-webpack-resolver

Imports

createResolver

wrong

const createResolver = require('postcss-import-webpack-resolver').default

correct

import createResolver from 'postcss-import-webpack-resolver'

Default export, CommonJS require works with const createResolver = require('postcss-import-webpack-resolver')

Quickstart

Example of creating a resolver with webpack aliases and modules for postcss-import.

const cssImport = require('postcss-import');
const createResolver = require('postcss-import-webpack-resolver');
const webpackConfig = { resolve: { alias: { '@': '/src' }, modules: ['node_modules'] } };
const plugins = [
  cssImport({
    resolve: createResolver({
      alias: webpackConfig.resolve.alias,
      modules: webpackConfig.resolve.modules
    })
  })
];
// Use with PostCSS