{"id":18971,"library":"auto-css-modules-webpack-plugin","title":"Auto CSS Modules Webpack Plugin","description":"Automatically detects import or require statements for CSS files and adds a query parameter to mark them as CSS Modules in webpack. Current stable version is 1.1.1, with npm package last updated in March 2023. The plugin works by analyzing the AST during webpack's parse phase, converting statements like `import styles from './index.css'` to `import styles from './index.css?modules'`. Supports default extensions: .css, .less, .sass, .scss, .stylus, .styl. Designed for webpack 4 (>=4.46.0) and 5 (>=5.20.0). Key differentiator: avoids manual configuration of CSS Modules per file by automating the detection based on variable assignment.","status":"active","version":"1.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/waivital/auto-css-modules-webpack-plugin","tags":["javascript","webpack","plugin","css-modules"],"install":[{"cmd":"npm install auto-css-modules-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add auto-css-modules-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add auto-css-modules-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - plugin hooks into webpack compiler","package":"webpack","optional":false}],"imports":[{"note":"Package does not ship ESM; CommonJS require is mandatory.","wrong":"import AutoCSSModulesWebpackPlugin from 'auto-css-modules-webpack-plugin'","symbol":"AutoCSSModulesWebpackPlugin","correct":"const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin')"},{"note":"If using TypeScript with esModuleInterop, direct require works; otherwise .default may be needed. Check your setup.","wrong":"const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin')","symbol":"AutoCSSModulesWebpackPlugin","correct":"const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin').default"},{"note":"Default options work; but extraExtnames must be provided if using non-standard extensions beyond defaults.","wrong":"module.exports = { plugins: [new AutoCSSModulesWebpackPlugin()] }","symbol":"webpack configuration","correct":"const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin'); module.exports = { plugins: [new AutoCSSModulesWebpackPlugin({ queryFlag: 'modules', extraExtnames: [] })] }"}],"quickstart":{"code":"const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin');\nconst path = require('path');\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.js',\n  output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        oneOf: [\n          {\n            resourceQuery: /modules/,\n            use: ['style-loader', { loader: 'css-loader', options: { modules: { localIdentName: '[name]__[local]--[hash:base64:5]' } } }]\n          },\n          { use: ['style-loader', { loader: 'css-loader', options: {} }] }\n        ]\n      }\n    ]\n  },\n  plugins: [new AutoCSSModulesWebpackPlugin({ queryFlag: 'modules', extraExtnames: [] })]\n};","lang":"javascript","description":"Webpack config with css-loader oneOf rules: CSS files with ?modules query get CSS Modules enabled, others treated as global CSS. Plugin auto-adds ?modules to imports."},"warnings":[{"fix":"Upgrade webpack to version 4.46.0+ or 5.20.0+.","message":"Plugin cannot be used with webpack <4.46.0 or <5.20.0 due to peer dependency range.","severity":"gotcha","affected_versions":"<4.46.0 || <5.20.0"},{"fix":"If you need to exclude a default extension, consider a custom webpack rule instead.","message":"Default extname list is fixed and cannot be overwritten; extraExtnames appends to the list but does not replace defaults.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider alternatives like @umijs/babel-plugin-auto-css-modules for newer setups.","message":"The package is low maintenance; last update March 2023. May not support future webpack versions.","severity":"deprecated","affected_versions":">=1.0.0"}],"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 auto-css-modules-webpack-plugin`.","cause":"Package not installed or missing from node_modules.","error":"Cannot find module 'auto-css-modules-webpack-plugin'"},{"fix":"Use `const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin');`.","cause":"Using import statement instead of require, or missing .default.","error":"TypeError: AutoCSSModulesWebpackPlugin is not a constructor"},{"fix":"Add 'style-loader' and 'css-loader' to the webpack config as shown in quickstart.","cause":"css-loader not configured correctly or oneOf rules missing.","error":"Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}