{"_id":"@akouryy/next-less","_rev":"1-ae3d00b3690facaed8936362002cebd7","name":"@akouryy/next-less","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@akouryy/next-less","version":"1.1.0","main":"index.js","license":"MIT","repository":{"type":"git","url":"https://github.com/akouryy/next-plugins.git"},"dependencies":{"@zeit/next-css":"1.0.1","less-loader":"~5.0.0"},"devDependencies":{"less":"^3.0.0"},"peerDependencies":{"less":"^3.0.0"},"gitHead":"31e8978d07e5468f760a222a72d1e8f3f457e6ff","description":"Import `.less` files in your Next.js project","_id":"@akouryy/next-less@1.1.0","dist":{"shasum":"2ef400c6c18b542a56a9ff988b76acd85a54cf86","integrity":"sha512-z8r9dvjCqwvCO8714h0zEnfLxE7mx8CwJa+OkeThD4arzZ+zxGvGpO1rAxSb+nOom1jYaHVQn7eml//8IG61Sw==","tarball":"https://registry.npmjs.org/@akouryy/next-less/-/next-less-1.1.0.tgz","fileCount":4,"unpackedSize":5253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhZ95CRA9TVsSAnZWagAA4QUP/1xlXrZ8GyFJvRo1uS+W\nL1c8/m4gmYwmCBXy0Vrfw9tQXI2PZVtp/ujFnE+ssK2T/eo8A3IpX8uwNK+5\nxjl+GmiftrwLppkCI3f6Hoj/IXlv/uupoZNIo9TQKJjPKLVWbJjLWnjtTyVG\ny6SyaxtDP9xoOK8oNDwOYhyRKYsNhbbFRDWfiYSDAG3SbePM3NL0f2ABWseN\nOvQ3NjW/rvcR9RxwIGPBLAdpfZOrFT1aXK7h6xh75KBRvi6R5NaVugYtp2UK\nTkC1jzNfPFpxh9Lezuw0XI0QO7WFgM73TwyYxusc3KKIj3Et1XbnEOpd+P30\nzlXSc/zuTrA6rAmuH7x5tpKoTrkMfrO0Pwy8EkZDfQ+Bf/yfO62DJkDDvh2p\n8yP1kV16rK99NtORVFPG7q4WznDcsppl/p33sgO4rEFdmm6sLHKLL+IRb+DM\nDO32UUw7Njw/kRhoqku0+/UqpliUkCFkrxfTqjK6rW8WzVkGctiG7qnnXNRO\nln/Oa0ONQLERIHoPIrp+ERnKQ++Ej4mat4wcXivhAVN9SGVJ/Df5YT3uVN7I\n8KEz4HVH7FD47v9YpuV/kcZVmrTmCM1ATLrqHW1PUECEYwEppexl5Bn0Slu3\njfSOAliZPwe8q7DHWptGQJbf9kYCV1cFR7p9CuIyqJ9nDWDh6xVJuKhj8oPg\nI2SI\r\n=gqV7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCH1cWnPF22MFYoWs8JombvXKcFUfdfnENplpffDHYixgIgAkE/YekJeZqAsb+CblMLfTiHjZM2Ywlue6aqAcnm428="}]},"maintainers":[{"name":"akouryy","email":"akouryy7+npm@gmail.com"}],"_npmUser":{"name":"akouryy","email":"akouryy7+npm@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-less_1.1.0_1569038201152_0.058513971249427144"},"_hasShrinkwrap":false}},"time":{"created":"2019-09-21T03:56:40.922Z","1.1.0":"2019-09-21T03:56:41.286Z","modified":"2022-04-04T12:31:06.185Z"},"maintainers":[{"name":"akouryy","email":"akouryy7+npm@gmail.com"}],"description":"Import `.less` files in your Next.js project","repository":{"type":"git","url":"https://github.com/akouryy/next-plugins.git"},"license":"MIT","readme":"Forked from [zeit/next-plugins](https://github.com/zeit/next-plugins).\n\n# Next.js + Less\n\nImport `.less` files in your Next.js project\n\n## Installation\n\n```\nnpm install --save @zeit/next-less less\n```\n\nor\n\n```\nyarn add @zeit/next-less less\n```\n\n## Usage\n\nThe stylesheet is compiled to `.next/static/css`. Next.js will automatically add the css file to the HTML. \nIn production a chunk hash is added so that styles are updated when a new version of the stylesheet is deployed.\n\n### Without CSS modules\n\nCreate a `next.config.js` in your project\n\n```js\n// next.config.js\nconst withLess = require('@zeit/next-less')\nmodule.exports = withLess({\n /* config options here */\n})\n```\n\nCreate a Less file `styles.less`\n\n```less\n@font-size: 50px;\n.example {\n font-size: @font-size;\n}\n```\n\nCreate a page file `pages/index.js`\n\n```js\nimport \"../styles.less\"\n\nexport default () =>
Hello World!
\n```\n\n### With CSS modules\n\n```js\n// next.config.js\nconst withLess = require('@zeit/next-less')\nmodule.exports = withLess({\n cssModules: true\n})\n```\n\nCreate a Less file `styles.less`\n\n```less\n@font-size: 50px;\n.example {\n font-size: @font-size;\n}\n```\n\nCreate a page file `pages/index.js`\n\n```js\nimport css from \"../styles.less\"\n\nexport default () =>
Hello World!
\n```\n\n### With CSS modules and options\n\nYou can also pass a list of options to the `css-loader` by passing an object called `cssLoaderOptions`.\n\nFor instance, [to enable locally scoped CSS modules](https://github.com/css-modules/css-modules/blob/master/docs/local-scope.md#css-modules--local-scope), you can write:\n\n```js\n// next.config.js\nconst withLess = require('@zeit/next-less')\nmodule.exports = withLess({\n cssModules: true,\n cssLoaderOptions: {\n importLoaders: 1,\n localIdentName: \"[local]___[hash:base64:5]\",\n }\n})\n```\n\nCreate a CSS file `styles.css`\n\n```css\n.example {\n font-size: 50px;\n}\n```\n\nCreate a page file `pages/index.js` that imports your stylesheet and uses the hashed class name from the stylesheet\n\n```js\nimport css from \"../style.css\"\n\nconst Component = props => {\n return (\n
\n ...\n
\n )\n}\n\nexport default Component\n```\n\nYour exported HTML will then reflect locally scoped CSS class names.\n\nFor a list of supported options, [refer to the webpack `css-loader` README](https://github.com/webpack-contrib/css-loader#options).\n\n### PostCSS plugins\n\nCreate a `next.config.js` in your project\n\n```js\n// next.config.js\nconst withLess = require('@zeit/next-less')\nmodule.exports = withLess({\n /* config options here */\n})\n```\n\nCreate a `postcss.config.js`\n\n```js\nmodule.exports = {\n plugins: {\n // Illustrational\n 'postcss-css-variables': {}\n }\n}\n```\n\nCreate a CSS file `styles.scss` the CSS here is using the css-variables postcss plugin.\n\n```css\n:root {\n --some-color: red;\n}\n\n.example {\n /* red */\n color: var(--some-color);\n}\n```\n\nWhen `postcss.config.js` is not found `postcss-loader` will not be added and will not cause overhead.\n\nYou can also pass a list of options to the `postcss-loader` by passing an object called `postcssLoaderOptions`.\n\nFor example, to pass theme env variables to postcss-loader, you can write:\n\n```js\n// next.config.js\nconst withLess = require('@zeit/next-less')\nmodule.exports = withLess({\n postcssLoaderOptions: {\n parser: true,\n config: {\n ctx: {\n theme: JSON.stringify(process.env.REACT_APP_THEME)\n }\n }\n }\n})\n```\n\n\n### Configuring Next.js\n\nOptionally you can add your custom Next.js configuration as parameter\n\n```js\n// next.config.js\nconst withLess = require('@zeit/next-less')\nmodule.exports = withLess({\n webpack(config, options) {\n return config\n }\n})\n```\n","readmeFilename":"readme.md"}