# @pieced/style-config-webpack-plugin

> Automatically configuration webpack5 style loader

Latest version **1.1.18** (published 2025-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @pieced/style-config-webpack-plugin
pnpm add @pieced/style-config-webpack-plugin
yarn add @pieced/style-config-webpack-plugin
bun add @pieced/style-config-webpack-plugin
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.18 |
| Published | 2025-06-09 |
| First published | 2023-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mingdev |
| Maintainers | adming |
| Keywords | webpack, webpack-plugin |

## Links

- npm: https://www.npmjs.com/package/@pieced/style-config-webpack-plugin
- Homepage: https://github.com/pieced-team/webpack-config
- npm.io page: https://npm.io/package/@pieced/style-config-webpack-plugin

## Dependencies (7)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [css-loader](https://npm.io/package/css-loader.md) ^6.7.3
- [style-loader](https://npm.io/package/style-loader.md) ^3.3.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^7.0.2
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^8.0.1
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.7.2
- [css-minimizer-webpack-plugin](https://npm.io/package/css-minimizer-webpack-plugin.md) ^4.2.2

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.1.18 (latest) — 2025-06-09
- 1.1.15-beta.0 (beta) — 2025-04-17
- 1.1.17 — 2025-05-07
- 1.1.16 — 2025-05-07
- 1.1.15 — 2025-04-17
- 1.1.14 — 2025-04-14
- 1.1.13 — 2025-04-11
- 1.1.12 — 2025-04-10
- 1.1.11 — 2025-04-10
- 1.1.10 — 2025-04-07
- 1.1.9 — 2025-04-07
- 1.1.8 — 2025-04-07
- 1.1.7 — 2025-04-07
- 1.1.6 — 2025-04-07
- 1.1.5 — 2025-04-07
- … 12 more at https://npm.io/package/@pieced/style-config-webpack-plugin/versions

## README

<h1 align="center">@pieced/style-config-webpack-plugin 👋</h1>
<p align="center">
  <a href="https://www.npmjs.com/package/@pieced/style-config-webpack-plugin" target="_blank">
    <img alt="Version" src="https://img.shields.io/npm/v/@pieced/style-config-webpack-plugin.svg">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/style-config-webpack-plugin" target="_blank">
    <img alt="Download" src="https://img.shields.io/npm/dm/@pieced/style-config-webpack-plugin.svg?color=blue" />
  </a>
  <a href="https://www.npmjs.com/package/@pieced/style-config-webpack-plugin" target="_blank">
  <img alt="Webpack" src="https://img.shields.io/badge/webpack->=5.0.0-blue">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/style-config-webpack-plugin" target="_blank">
  <img alt="Last Commit" src="https://img.shields.io/github/last-commit/pieced-team/style-config-webpack-plugin">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/style-config-webpack-plugin" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/npm/l/@pieced/style-config-webpack-plugin" />
  </a>
</p>

> Automatically configuration webpack5 style loader

## Install

```sh
npm i --save-dev @pieced/style-config-webpack-plugin
```

## Webpack Config

```js
const StyleConfigWebpackPlugin = require('@pieced/style-config-webpack-plugin');
module.exports = {
  plugins: [new StyleConfigWebpackPlugin()],
};
```

## Options
**useCssModules**

- `type boolean`
- `default true`

**cssModulesQuery**

- `type string`
- `default modules`

**usePostCSS**

- `type boolean`
- `default true`

**extract**

- `type boolean or object`
- default

```js
const defaultExtract = webpack.mode === 'production' && {
  filename: 'static/css/[contenthash:10].css',
  chunkFilename: 'static/css/[contenthash:10].css',
}
```

**sourceMap**

- `type boolean`
- `default webpack.mode === 'development'`

**cssModulesName**

- `type string`
- `default webpack.mode === 'development' ? '[name]__[local]--[hash:base64:5]' : '_[hash:base64:10]'`

**generator**

- `type function`
- `default (suffix, loaders) => (webpack.mode === 'development' ? ['style-loader'].concat(loaders) : loaders)`

**minimizer**

- `type object`
- [css-minimizer-webpack-plugin options](https://webpack.js.org/plugins/css-minimizer-webpack-plugin)
- default

```js
const defaultMinimizer = {
  minimizerOptions: {
    preset: ['default', {
      discardComments: {
        removeAll: true,
      },
    }],
  },
}
```

---
_Source: https://npm.io/package/@pieced/style-config-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._