{ "manifest": { "name": "postcss-loader", "version": "6.2.1", "description": "PostCSS loader for webpack", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/webpack-contrib/postcss-loader.git" }, "author": { "name": "Andrey Sitnik", "email": "andrey@sitnik.ru" }, "homepage": "https://github.com/webpack-contrib/postcss-loader", "bugs": { "url": "https://github.com/webpack-contrib/postcss-loader/issues" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/webpack" }, "main": "dist/cjs.js", "engines": { "node": ">= 12.13.0" }, "scripts": { "start": "npm run build -- -w", "clean": "del-cli dist", "prebuild": "npm run clean", "build": "cross-env NODE_ENV=production babel src -d dist --copy-files", "commitlint": "commitlint --from=master", "security": "npm audit --production", "lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different", "lint:js": "eslint --cache .", "lint": "npm-run-all -l -p \"lint:**\"", "test:only": "cross-env NODE_ENV=test jest", "test:watch": "npm run test:only -- --watch", "test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage", "pretest": "npm run lint", "test": "npm run test:coverage", "prepare": "husky install && npm run build", "release": "standard-version" }, "files": [ "dist" ], "peerDependencies": { "postcss": "^7.0.0 || ^8.0.1", "webpack": "^5.0.0" }, "dependencies": { "cosmiconfig": "^7.0.0", "klona": "^2.0.5", "semver": "^7.3.5" }, "devDependencies": { "@babel/cli": "^7.16.0", "@babel/core": "^7.16.0", "@babel/preset-env": "^7.16.4", "@commitlint/cli": "^15.0.0", "@commitlint/config-conventional": "^15.0.0", "@webpack-contrib/eslint-config-webpack": "^3.0.0", "babel-jest": "^27.3.1", "cross-env": "^7.0.3", "cssnano": "^5.0.11", "del": "^6.0.0", "del-cli": "^4.0.1", "eslint": "^8.3.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.25.3", "husky": "^7.0.4", "jest": "^27.3.1", "less": "^4.1.2", "less-loader": "^10.2.0", "lint-staged": "^12.1.2", "memfs": "^3.4.0", "midas": "^2.0.3", "npm-run-all": "^4.1.5", "postcss": "^8.3.1", "postcss-dark-theme-class": "^0.7.3", "postcss-import": "^14.0.2", "postcss-js": "^3.0.3", "postcss-nested": "^5.0.6", "postcss-short": "^5.0.0", "prettier": "^2.5.0", "sass": "^1.43.5", "sass-loader": "^12.3.0", "standard-version": "^9.3.2", "strip-ansi": "^6.0.0", "sugarss": "^4.0.1", "webpack": "^5.64.4" }, "keywords": [ "css", "postcss", "postcss-runner", "webpack", "webpack-loader" ], "_registry": "npm", "_loc": "/homez.1033/heliovt/.cache/yarn/v6/npm-postcss-loader-6.2.1-0895f7346b1702103d30fdc66e4d494a93c008ef-integrity/node_modules/postcss-loader/package.json", "readmeFilename": "README.md", "readme": "
\n \"PostCSS\n \n \n \n
\n \n \"Sponsored\n \n
\n
\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![deps][deps]][deps-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![size][size]][size-url]\n\nWebpack chat: [![chat][chat]][chat-url]\n\nPostCSS chat: [![chat-postcss][chat-postcss]][chat-postcss-url]\n\n# postcss-loader\n\nLoader to process CSS with [`PostCSS`](https://github.com/postcss/postcss).\n\n## Getting Started\n\nYou need webpack v5 to use the latest version. For Webpack v4, you have to install postcss-loader v4.\n\nTo begin, you'll need to install `postcss-loader` and `postcss`:\n\n```console\nnpm install --save-dev postcss-loader postcss\n```\n\nThen add the plugin to your `webpack` config. For example:\n\n> In the following configuration the plugin [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) is used, which is not installed by default.\n\n**file.js**\n\n```js\nimport css from \"file.css\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n \"css-loader\",\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [\n [\n \"postcss-preset-env\",\n {\n // Options\n },\n ],\n ],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\nAlternative use with [config files](#config):\n\n**postcss.config.js**\n\n```js\nmodule.exports = {\n plugins: [\n [\n \"postcss-preset-env\",\n {\n // Options\n },\n ],\n ],\n};\n```\n\nThe loader **automatically** searches for configuration files.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\"style-loader\", \"css-loader\", \"postcss-loader\"],\n },\n ],\n },\n};\n```\n\nAnd run `webpack` via your preferred method.\n\n## Options\n\n| Name | Type | Default | Description |\n| :---------------------------------: | :------------------: | :-----------------------------------: | :------------------------------------------- |\n| [`execute`](#execute) | `{Boolean}` | `undefined` | Enable PostCSS Parser support in `CSS-in-JS` |\n| [`postcssOptions`](#postcssOptions) | `{Object\\|Function}` | `defaults values for Postcss.process` | Set `PostCSS` options and plugins |\n| [`sourceMap`](#sourcemap) | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |\n| [`implementation`](#implementation) | `{Function\\|String}` | `postcss` | Setup PostCSS implementation to use |\n\n### `execute`\n\nType: `Boolean`\nDefault: `undefined`\n\nIf you use JS styles the [`postcss-js`](https://github.com/postcss/postcss-js) parser, add the `execute` option.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.style.js$/,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n },\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n parser: \"postcss-js\",\n },\n execute: true,\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n### `postcssOptions`\n\nType: `Object|Function`\nDefault: `undefined`\n\nAllows to set [`PostCSS options`](https://postcss.org/api/#processoptions) and plugins.\n\nAll `PostCSS` options are supported.\nThere is the special `config` option for config files. How it works and how it can be configured is described below.\n\nWe recommend do not specify `from`, `to` and `map` options, because this can lead to wrong path in source maps.\nIf you need source maps please use the [`sourcemap`](#sourcemap) option.\n\n#### `Object`\n\nSetup `plugins`:\n\n**webpack.config.js** (**recommended**)\n\n```js\nconst myOtherPostcssPlugin = require(\"postcss-my-plugin\");\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [\n \"postcss-import\",\n [\"postcss-short\", { prefix: \"x\" }],\n require.resolve(\"my-postcss-plugin\"),\n myOtherPostcssPlugin({ myOption: true }),\n // Deprecated and will be removed in the next major release\n { \"postcss-nested\": { preserveEmpty: true } },\n ],\n },\n },\n },\n ],\n },\n};\n```\n\n**webpack.config.js** (**deprecated**, will be removed in the next major release)\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: {\n \"postcss-import\": {},\n \"postcss-short\": { prefix: \"x\" },\n },\n },\n },\n },\n ],\n },\n};\n```\n\nSetup `syntax`:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n // Can be `String`\n syntax: \"sugarss\",\n // Can be `Object`\n syntax: require(\"sugarss\"),\n },\n },\n },\n ],\n },\n};\n```\n\nSetup `parser`:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n // Can be `String`\n parser: \"sugarss\",\n // Can be `Object`\n parser: require(\"sugarss\"),\n // Can be `Function`\n parser: require(\"sugarss\").parse,\n },\n },\n },\n ],\n },\n};\n```\n\nSetup `stringifier`:\n\n**webpack.config.js**\n\n```js\nconst Midas = require(\"midas\");\nconst midas = new Midas();\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n // Can be `String`\n stringifier: \"sugarss\",\n // Can be `Object`\n stringifier: require(\"sugarss\"),\n // Can be `Function`\n stringifier: midas.stringifier,\n },\n },\n },\n ],\n },\n};\n```\n\n#### `Function`\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.(css|sss)$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: (loaderContext) => {\n if (/\\.sss$/.test(loaderContext.resourcePath)) {\n return {\n parser: \"sugarss\",\n plugins: [\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n };\n }\n\n return {\n plugins: [\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n };\n },\n },\n },\n ],\n },\n};\n```\n\n#### `config`\n\nType: `Boolean|String`\nDefault: `undefined`\n\nAllows to set options using config files.\nOptions specified in the config file are combined with options passed to the loader, the loader options overwrite options from config.\n\n##### Config Files\n\nThe loader will search up the directory tree for configuration in the following places:\n\n- a `postcss` property in `package.json`\n- a `.postcssrc` file in JSON or YAML format\n- a `.postcssrc.json`, `.postcssrc.yaml`, `.postcssrc.yml`, `.postcssrc.js`, or `.postcssrc.cjs` file\n- a `postcss.config.js` or `postcss.config.cjs` CommonJS module exporting an object (**recommended**)\n\n##### Examples of Config Files\n\nUsing `Object` notation:\n\n**postcss.config.js** (**recommend**)\n\n```js\nmodule.exports = {\n // You can specify any options from https://postcss.org/api/#processoptions here\n // parser: 'sugarss',\n plugins: [\n // Plugins for PostCSS\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n};\n```\n\nUsing `Function` notation:\n\n**postcss.config.js** (**recommend**)\n\n```js\nmodule.exports = (api) => {\n // `api.file` - path to the file\n // `api.mode` - `mode` value of webpack, please read https://webpack.js.org/configuration/mode/\n // `api.webpackLoaderContext` - loader context for complex use cases\n // `api.env` - alias `api.mode` for compatibility with `postcss-cli`\n // `api.options` - the `postcssOptions` options\n\n if (/\\.sss$/.test(api.file)) {\n return {\n // You can specify any options from https://postcss.org/api/#processoptions here\n parser: \"sugarss\",\n plugins: [\n // Plugins for PostCSS\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n };\n }\n\n return {\n // You can specify any options from https://postcss.org/api/#processoptions here\n plugins: [\n // Plugins for PostCSS\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n };\n};\n```\n\n**postcss.config.js** (**deprecated**, will be removed in the next major release)\n\n```js\nmodule.exports = {\n // You can specify any options from https://postcss.org/api/#processoptions here\n // parser: 'sugarss',\n plugins: {\n // Plugins for PostCSS\n \"postcss-short\": { prefix: \"x\" },\n \"postcss-preset-env\": {},\n },\n};\n```\n\n##### Config Cascade\n\nYou can use different `postcss.config.js` files in different directories.\nConfig lookup starts from `path.dirname(file)` and walks the file tree upwards until a config file is found.\n\n```\n|– components\n| |– component\n| | |– index.js\n| | |– index.png\n| | |– style.css (1)\n| | |– postcss.config.js (1)\n| |– component\n| | |– index.js\n| | |– image.png\n| | |– style.css (2)\n|\n|– postcss.config.js (1 && 2 (recommended))\n|– webpack.config.js\n|\n|– package.json\n```\n\nAfter setting up your `postcss.config.js`, add `postcss-loader` to your `webpack.config.js`.\nYou can use it standalone or in conjunction with `css-loader` (recommended).\n\nUse it **before** `css-loader` and `style-loader`, but **after** other preprocessor loaders like e.g `sass|less|stylus-loader`, if you use any (since [webpack loaders evaluate right to left/bottom to top](https://webpack.js.org/concepts/loaders/#configuration)).\n\n**webpack.config.js** (**recommended**)\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: {\n importLoaders: 1,\n },\n },\n \"postcss-loader\",\n ],\n },\n ],\n },\n};\n```\n\n#### Boolean\n\nEnables/Disables autoloading config.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n config: false,\n },\n },\n },\n ],\n },\n};\n```\n\n#### String\n\nAllows to specify the path to the config file.\n\n**webpack.config.js**\n\n```js\nconst path = require(\"path\");\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n config: path.resolve(__dirname, \"custom.config.js\"),\n },\n },\n },\n ],\n },\n};\n```\n\n### `sourceMap`\n\nType: `Boolean`\nDefault: depends on the `compiler.devtool` value\n\nBy default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option.\nAll values enable source map generation except `eval` and `false` value.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\", options: { sourceMap: true } },\n { loader: \"postcss-loader\", options: { sourceMap: true } },\n { loader: \"sass-loader\", options: { sourceMap: true } },\n ],\n },\n ],\n },\n};\n```\n\nAlternative setup:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n devtool: \"source-map\",\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\" },\n { loader: \"postcss-loader\" },\n { loader: \"sass-loader\" },\n ],\n },\n ],\n },\n};\n```\n\n### `implementation`\n\nType: `Function | String`\nDefault: `postcss`\n\nThe special `implementation` option determines which implementation of PostCSS to use. Overrides the locally installed `peerDependency` version of `postcss`.\n\n**This option is only really useful for downstream tooling authors to ease the PostCSS 7-to-8 transition.**\n\n#### Function\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\" },\n {\n loader: \"postcss-loader\",\n options: { implementation: require(\"postcss\") },\n },\n { loader: \"sass-loader\" },\n ],\n },\n ],\n },\n};\n```\n\n#### String\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\" },\n {\n loader: \"postcss-loader\",\n options: { implementation: require.resolve(\"postcss\") },\n },\n { loader: \"sass-loader\" },\n ],\n },\n ],\n },\n};\n```\n\n## Examples\n\n### SugarSS\n\nYou'll need to install `sugarss`:\n\n```console\nnpm install --save-dev sugarss\n```\n\nUsing [`SugarSS`](https://github.com/postcss/sugarss) syntax.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: { importLoaders: 1 },\n },\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n parser: \"sugarss\",\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n### Autoprefixer\n\nYou'll need to install `autoprefixer`:\n\n```console\nnpm install --save-dev autoprefixer\n```\n\nAdd vendor prefixes to CSS rules using [`autoprefixer`](https://github.com/postcss/autoprefixer).\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: { importLoaders: 1 },\n },\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [\n [\n \"autoprefixer\",\n {\n // Options\n },\n ],\n ],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n> :warning: [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) includes [`autoprefixer`](https://github.com/postcss/autoprefixer), so adding it separately is not necessary if you already use the preset. More [information](https://github.com/csstools/postcss-preset-env#autoprefixer)\n\n### PostCSS Preset Env\n\nYou'll need to install `postcss-preset-env`:\n\n```console\nnpm install --save-dev postcss-preset-env\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: { importLoaders: 1 },\n },\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [\n [\n \"postcss-preset-env\",\n {\n // Options\n },\n ],\n ],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n### CSS Modules\n\nWhat is `CSS Modules`? Please [read](https://github.com/webpack-contrib/css-loader#modules).\n\nNo additional options required on the `postcss-loader` side.\nTo make them work properly, either add the `css-loader`’s `importLoaders` option.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: {\n modules: true,\n importLoaders: 1,\n },\n },\n \"postcss-loader\",\n ],\n },\n ],\n },\n};\n```\n\n### CSS-in-JS and [`postcss-js`](https://github.com/postcss/postcss-js)\n\nYou'll need to install `postcss-js`:\n\n```console\nnpm install --save-dev postcss-js\n```\n\nIf you want to process styles written in JavaScript, use the [`postcss-js`](https://github.com/postcss/postcss-js) parser.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.style.js$/,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: {\n importLoaders: 2,\n },\n },\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n parser: \"postcss-js\",\n },\n execute: true,\n },\n },\n \"babel-loader\",\n ],\n },\n ],\n },\n};\n```\n\nAs result you will be able to write styles in the following way\n\n```js\nimport colors from \"./styles/colors\";\n\nexport default {\n \".menu\": {\n color: colors.main,\n height: 25,\n \"&_link\": {\n color: \"white\",\n },\n },\n};\n```\n\n> :warning: If you are using Babel you need to do the following in order for the setup to work\n\n> 1. Add [`babel-plugin-add-module-exports`](https://github.com/59naga/babel-plugin-add-module-exports) to your configuration.\n> 2. You need to have only one **default** export per style module.\n\n### Extract CSS\n\nUsing [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n**webpack.config.js**\n\n```js\nconst isProductionMode = process.env.NODE_ENV === \"production\";\n\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n\nmodule.exports = {\n mode: isProductionMode ? \"production\" : \"development\",\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n isProductionMode ? MiniCssExtractPlugin.loader : \"style-loader\",\n \"css-loader\",\n \"postcss-loader\",\n ],\n },\n ],\n },\n plugins: [\n new MiniCssExtractPlugin({\n filename: isProductionMode ? \"[name].[contenthash].css\" : \"[name].css\",\n }),\n ],\n};\n```\n\n### Emit assets\n\nTo write a asset from PostCSS plugin to the webpack, need to add a message in `result.messages`.\n\nThe message should contain the following fields:\n\n- `type` = `asset` - Message type (require, should be equal `asset`)\n- `file` - file name (require)\n- `content` - file content (require)\n- `sourceMap` - sourceMap\n- `info` - asset info\n\n**webpack.config.js**\n\n```js\nconst customPlugin = () => (css, result) => {\n result.messages.push({\n type: \"asset\",\n file: \"sprite.svg\",\n content: \"...\",\n });\n};\n\nconst postcssPlugin = postcss.plugin(\"postcss-assets\", customPlugin);\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n \"css-loader\",\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [postcssPlugin()],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n### Add dependencies, contextDependencies, buildDependencies, missingDependencies\n\nThe dependencies are necessary for webpack to understand when it needs to run recompilation on the changed files.\n\nThere are two way to add dependencies:\n\n1. (Recommended). The plugin may emit messages in `result.messages`.\n\nThe message should contain the following fields:\n\n- `type` = `dependency` - Message type (require, should be equal `dependency`, `context-dependency`, `build-dependency` or `missing-dependency`)\n- `file` - absolute file path (require)\n\n**webpack.config.js**\n\n```js\nconst path = require(\"path\");\n\nconst customPlugin = () => (css, result) => {\n result.messages.push({\n type: \"dependency\",\n file: path.resolve(__dirname, \"path\", \"to\", \"file\"),\n });\n};\n\nconst postcssPlugin = postcss.plugin(\"postcss-assets\", customPlugin);\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n \"css-loader\",\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [postcssPlugin()],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n2. Pass `loaderContext` in plugin.\n\n**webpack.config.js**\n\n```js\nconst path = require(\"path\");\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n \"css-loader\",\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n config: path.resolve(__dirname, \"path/to/postcss.config.js\"),\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n**postcss.config.js**\n\n```js\nmodule.exports = (api) => ({\n plugins: [\n require(\"path/to/customPlugin\")({\n loaderContext: api.webpackLoaderContext,\n }),\n ],\n});\n```\n\n**customPlugin.js**\n\n```js\nconst path = require(\"path\");\n\nconst customPlugin = (loaderContext) => (css, result) => {\n loaderContext.webpack.addDependency(\n path.resolve(__dirname, \"path\", \"to\", \"file\")\n );\n};\n\nmodule.exports = postcss.plugin(\"postcss-assets\", customPlugin);\n```\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/postcss-loader.svg\n[npm-url]: https://npmjs.com/package/postcss-loader\n[node]: https://img.shields.io/node/v/postcss-loader.svg\n[node-url]: https://nodejs.org\n[deps]: https://david-dm.org/webpack-contrib/postcss-loader.svg\n[deps-url]: https://david-dm.org/webpack-contrib/postcss-loader\n[tests]: https://github.com/webpack-contrib/postcss-loader/workflows/postcss-loader/badge.svg\n[tests-url]: https://github.com/webpack-contrib/postcss-loader/actions\n[cover]: https://codecov.io/gh/webpack-contrib/postcss-loader/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/postcss-loader\n[chat]: https://badges.gitter.im/webpack/webpack.svg\n[chat-url]: https://gitter.im/webpack/webpack\n[chat-postcss]: https://badges.gitter.im/postcss/postcss.svg\n[chat-postcss-url]: https://gitter.im/postcss/postcss\n[size]: https://packagephobia.now.sh/badge?p=postcss-loader\n[size-url]: https://packagephobia.now.sh/result?p=postcss-loader\n", "licenseText": "Copyright JS Foundation and other contributors\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n'Software'), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY\nCLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,\nTORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\nSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE." }, "artifacts": [], "remote": { "resolved": "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef", "type": "tarball", "reference": "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz", "hash": "0895f7346b1702103d30fdc66e4d494a93c008ef", "integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==", "registry": "npm", "packageName": "postcss-loader", "cacheIntegrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q== sha1-CJX3NGsXAhA9MP3Gbk1JSpPACO8=" }, "registry": "npm", "hash": "0895f7346b1702103d30fdc66e4d494a93c008ef" }