{"_id":"@2012mjm/next-sass","_rev":"3-b2e08e9cf1feabfa0a6aecd5af526277","name":"@2012mjm/next-sass","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@2012mjm/next-sass","version":"0.0.1","main":"index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/2012mjm/next-sass.git"},"dependencies":{"@zeit/next-css":"1.0.1","sass-loader":"6.0.6"},"devDependencies":{"node-sass":"^4.7.2","extract-css-chunks-webpack-plugin":"^4.5.3"},"peerDependencies":{"node-sass":"^4.7.2"},"gitHead":"a407bc2d799419099a0c34f2ce5ba17b068ba217","description":"Import `.sass` or `.scss` files in your Next.js project","bugs":{"url":"https://github.com/2012mjm/next-sass/issues"},"homepage":"https://github.com/2012mjm/next-sass#readme","_id":"@2012mjm/next-sass@0.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"2012mjm","email":"2007mjm@gmail.com"},"dist":{"integrity":"sha512-7cRAzfBt0S8NQ0YOMXDhJ6ADQc9IcuthrdhlwnBhS85s8+05YJESHfRF1tx2v3GVmKkACHWnBdDhgsoFIRScUQ==","shasum":"be2d913fa986ffffaffd80d10954ed2fb8642668","tarball":"https://registry.npmjs.org/@2012mjm/next-sass/-/next-sass-0.0.1.tgz","fileCount":3,"unpackedSize":8334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMvL1CRA9TVsSAnZWagAAeQYP+QHE5ndDM7qkU640gZRO\n/oFVUKIywytd9eQmxRYdfGqvFYeF7rh49z4+8nwKZNyIURY7bWvT8gHD0Aie\n3NLLDqhVa2ZYbSl1usFX6tXK651k6Qm0wddnnOu4a8IqF1cy+zKf3bhQiGCU\nmQ9K9In1dF8zJ+epZEISY66BFbsTfCO4yKXGBnsr94sEsjdiNlEVxjjdzJey\n1ZVqjhIF8yllnYPgkkcRRJ4Era5Gq2Ab4Iz4eDSRJayiMBPz1x75y0+NDTWU\n33tODg/A+auz9mn9oVkCeo7cKxBYwJ68jSi9CDQw4iQLmXDxcuzT1TGZe2aL\nVM7ANfD3g3zWLTQtjePSGy6RFsF2EaAiF/3/9w7JrZGajbT3vs+gCO+isYnf\nQiMHdyCa1OCbiol53xY0lEEnjY+vuZLuCDpxmj0cZgRp2DmsW2bhMA2eFiwT\nPCdSjdZuQLkxHCNU0DAI4Boe6VbUVH0F3elKOWxXKJ0oSRMUpWGfsB8hUhg5\nUqBxWTUnmLZhzztjicY9c0GGRCc5xRis49VKi/HeNkZvwGskMebETUAJE9h9\n9qn91G6ATlO5ThfNRJLEkjdeRGuP4gIkr1wM+zpnCUP9lmLVvnzSemxRD11H\n+qNjf1JXFCMxqjwnj80qGgSXpjHM5KT1nU/KdumH4L2KbtYb+slhh9WAehW/\nVaYL\r\n=e8Xk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfd3UlrIixEKlGMuzFJJC/OfQVg4bDPPJkO/+01ea3QAiEAoO8cB5Z2afbC71FNU+u3M+NqInXriuJfJsi7OZonGTY="}]},"maintainers":[{"name":"2012mjm","email":"2007mjm@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-sass_0.0.1_1563620084827_0.15350123467829357"},"_hasShrinkwrap":false},"0.0.2":{"name":"@2012mjm/next-sass","version":"0.0.2","main":"index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/2012mjm/next-sass.git"},"dependencies":{"@zeit/next-css":"1.0.1","sass-loader":"6.0.6"},"devDependencies":{"node-sass":"^4.7.2","extract-css-chunks-webpack-plugin":"^4.5.3"},"peerDependencies":{"node-sass":"^4.7.2"},"gitHead":"6c4b386f9edef068ddc95c04ef3a45de9f81f28a","description":"Import `.sass` or `.scss` files in your Next.js project","bugs":{"url":"https://github.com/2012mjm/next-sass/issues"},"homepage":"https://github.com/2012mjm/next-sass#readme","_id":"@2012mjm/next-sass@0.0.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"2012mjm","email":"2007mjm@gmail.com"},"dist":{"integrity":"sha512-W/k/KCm4iii5tdzBNZR9v+EyzXZceuSTpSKSktq02dqkpLO2xgIZ07IP7sOITbXSTGn1aOafVNvOdXueaECsLw==","shasum":"1f25401188b0c53125c166b6c3d605f1da6cc342","tarball":"https://registry.npmjs.org/@2012mjm/next-sass/-/next-sass-0.0.2.tgz","fileCount":3,"unpackedSize":8473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMvT0CRA9TVsSAnZWagAAATMP/0FWVDHRozF3FaU9KsHH\njRPpYIxhtV0DLkj/WZyddTjSRiNNHRN2r0GbFgBPyg1L1ZWc8HxDo2uVW8jE\nI8R3g8pqKNUeKbnThj3j2Lk2qdKp6/6nxOJo93csGtmlvcRIfd48mk8z/tL1\nhIYZCFil7eni5vfjvle+0CWXp35t8NgzmECNZzud3hQy+DruGV7u91uXnJER\nHPqyOeD6oZ1IuYv7mKk2KKCOH0yrpbmcZQ9JuEd7G3O7al399tu7CKXxG9P3\ngJIlQSnCr3f6nUM371BAvnv+ColeNADy845h+I2eItwk5bwEYrIJS0NuAVS7\n9BEBCilwUdSXUHkWw+bdGmN9ZjlgMQLAmKxDU/Smfs0s010sU3NXsKQxjUia\nrkpPnBFgoAdPt09isvpJ+E9g3z+/3Dz7yD9rW/CWgpk7J+ZFBJDIQjx9eNc8\nfk2FIF+Kxq8s3lPksVKAy3AJqdoSO0xBwAl3o77Uv/yrXfqUoXKyBk7ga+0b\nl45pefXAqUO+C2JWOhdznJdbMIJ1DdnNnhEmpnYGvKQ//XGgpPtymCalYQn2\nGXxJB74bF/wH9cSBst+CNYZ8MJxRZl35APqoudc6nnhSLZqoaOUsnJiVmwe7\nwIBSwvyt44iWn2SLIy62lfLCCOt1y9rFnhIyZ+7eBACNivw/3TUPGP7nv15K\nuoZa\r\n=d9Sy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUJ5w16lyJ46i7SB8XsaOxns5qQbESAJXwJmuncWlvEAIgJKUoPErFrECNfJp8oWB0H6P1/fVKSocbltPGG6hxUBI="}]},"maintainers":[{"name":"2012mjm","email":"2007mjm@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-sass_0.0.2_1563620595741_0.8069745721407193"},"_hasShrinkwrap":false},"0.0.4":{"name":"@2012mjm/next-sass","version":"0.0.4","main":"index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/2012mjm/next-sass.git"},"dependencies":{"@zeit/next-css":"1.0.1","sass-loader":"6.0.6"},"devDependencies":{"node-sass":"^4.7.2","extract-css-chunks-webpack-plugin":"^4.5.3"},"peerDependencies":{"node-sass":"^4.7.2"},"gitHead":"612e97247c0eb1b97153a099d739a7482c7fdfb6","description":"Import `.sass` or `.scss` files in your Next.js project","bugs":{"url":"https://github.com/2012mjm/next-sass/issues"},"homepage":"https://github.com/2012mjm/next-sass#readme","_id":"@2012mjm/next-sass@0.0.4","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"2012mjm","email":"2007mjm@gmail.com"},"dist":{"integrity":"sha512-TfRnu36heOdpt/cJgjQT2pLgdvERCra0AZ0/BXtF2cMsjfNs29uRy9AGiu/zm/yQ2jjjRqmC+V2FykmEB7fx8g==","shasum":"61e67feeed7addb5ea1351de1873c3ff51788f3d","tarball":"https://registry.npmjs.org/@2012mjm/next-sass/-/next-sass-0.0.4.tgz","fileCount":3,"unpackedSize":8142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdM/JjCRA9TVsSAnZWagAA45UP/jLMle6muRSS0eWtNc/N\no+cN5D6A3wRLUgiVZnTVBlpfz5yXg/eSnF0WG6NL8gYEtb/EG6xmZ38Qcz14\nGe2PUp0OCdsMZ0enG07G1U2Vy6Rhr6yYGLFLc+GGkm/ioSH3HcvbwRiMkVJ1\nokjpckbrByp+ASsJknQRqgoeI0EHjw1VOTsd/0UJy8ql7NzQp3zjqkulbM0M\nk1B13+F9Bdopwujqq5WQaI1z1DoqFlckQO9UDi3CszQengtcAZ3rI/d0JygZ\nTx9BJadMxKG96S+y5cx+dnKSzqfFTE/eJD1R/0fe1oL0k2adszSh3UbwICwq\nKTBcMWZ1d/gXdhqRKud6zZwZOglRQGFAxqO0wzZVT00CCnPYovnlo4kc1cm7\nkEgN9T4pgzOuNokYSgS1wV5kqyqANDVI09HBhifcp8NP6QMORanueLXNOmr+\nS+DQ8BVXmw9AuHXDWIieQq0L9lSdt0DUHlK4mwtBhoQbSZnkq+Auv+rtKcZO\nknut4Ll8Pg0t+/JRUG9fWWm0HcLLRlPP/W0BVzU5x47VN1pIWGQ+f79FUWPr\nNvqspp1y1MvAOTbLeFo/A5UD01EfUvQ4CcfTyawFanPsDtFRKQXgDchILfa1\n2G6z54Fh+0eMTPBwfU2+z7rmkGoAA8gEe1LIsQDJO/ueUjj8CG2r8Lbez6ni\nfK6E\r\n=8mfa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGOqIy5Sacdf8AQzC8EmmhWZuHjgHojTz07DQ+3KJR9AiBCl5bMRCnI4+cNrmGrj7TP3q8rUTUhh37Gv8+VScyIkA=="}]},"maintainers":[{"name":"2012mjm","email":"2007mjm@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-sass_0.0.4_1563685474932_0.6473987539338033"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-20T10:54:44.639Z","0.0.1":"2019-07-20T10:54:44.988Z","modified":"2022-04-04T10:35:02.859Z","0.0.2":"2019-07-20T11:03:15.917Z","0.0.4":"2019-07-21T05:04:35.136Z"},"maintainers":[{"name":"2012mjm","email":"2007mjm@gmail.com"}],"description":"Import `.sass` or `.scss` files in your Next.js project","homepage":"https://github.com/2012mjm/next-sass#readme","repository":{"type":"git","url":"git+https://github.com/2012mjm/next-sass.git"},"bugs":{"url":"https://github.com/2012mjm/next-sass/issues"},"license":"MIT","readme":"# Next.js + Sass\r\n\r\nImport `.sass` or `.scss` files in your Next.js project\r\n\r\nNotice: this library supports simultaneously the Sass modules and Sass, it also has the ability to chunk css files for each components.\r\n\r\n## Installation\r\n\r\n```\r\nnpm install --save @2012mjm/next-sass node-sass\r\n```\r\n\r\nor\r\n\r\n```\r\nyarn add @2012mjm/next-sass node-sass\r\n```\r\n\r\n## Usage\r\n\r\nThe stylesheet is compiled to `.next/static/css`. Next.js will automatically add the css file to the HTML. \r\nIn production a chunk hash is added so that styles are updated when a new version of the stylesheet is deployed.\r\n\r\n### Config\r\n\r\nCreate a `next.config.js` in your project\r\n\r\n```js\r\n// next.config.js\r\nconst withSass = require('@2012mjm/next-sass')\r\nmodule.exports = withSass({\r\n  /* config options here */\r\n})\r\n```\r\n\r\nCreate a Sass file `styles.scss`, this is without Sass modules\r\n\r\n```scss\r\n$font-size: 50px;\r\n.example {\r\n  font-size: $font-size;\r\n}\r\n```\r\n\r\nAnd use the `module.scss` extension for the Sass module, for example: `styles.module.scss`\r\n\r\nCreate a page file `pages/index.js`\r\n\r\n```js\r\nimport \"../styles.scss\"\r\n\r\nexport default () => <div className=\"example\">Hello World!</div>\r\n```\r\n\r\nAnd use this for Sass module\r\n\r\n```js\r\nimport styles from \"../styles.module.scss\"\r\n\r\nexport default () => <div className={styles.example}>Hello World!</div>\r\n```\r\n\r\n### With options\r\n\r\nYou can also pass a list of options to the `css-loader` by passing an object called `cssLoaderOptions`.\r\n\r\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:\r\n\r\n```js\r\n// next.config.js\r\nconst withSass = require('@2012mjm/next-sass')\r\nmodule.exports = withSass({\r\n  cssLoaderOptions: {\r\n    importLoaders: 1,\r\n    localIdentName: \"[local]___[hash:base64:5]\",\r\n  }\r\n})\r\n```\r\n\r\n### Extract css initialize\r\n\r\n```js\r\n// next.config.js\r\nconst withSass = require('@2012mjm/next-sass')\r\n\r\nmodule.exports = withSass({\r\n  cssExtractOutput: {\r\n    filename: {\r\n      dev: 'static/css/[name].css',\r\n      prod: 'static/css/[contenthash:8].css'\r\n    },\r\n    chunkFilename: {\r\n      dev: 'static/css/[name].chunk.css',\r\n      prod: 'static/css/[contenthash:16].css'\r\n    }\r\n  }\r\n})\r\n```\r\n\r\nYour exported HTML will then reflect locally scoped CSS class names.\r\n\r\nFor a list of supported options, [refer to the webpack `css-loader` README](https://github.com/webpack-contrib/css-loader#options).\r\n\r\n### With SASS loader options\r\n\r\nYou can pass options from [node-sass](https://github.com/sass/node-sass#options)\r\n\r\n```js\r\n// next.config.js\r\nconst withSass = require('@2012mjm/next-sass')\r\nmodule.exports = withSass({\r\n  sassLoaderOptions: {\r\n    includePaths: [\"absolute/path/a\", \"absolute/path/b\"]\r\n  }\r\n})\r\n```\r\n\r\n### PostCSS plugins\r\n\r\nCreate a `next.config.js` in your project\r\n\r\n```js\r\n// next.config.js\r\nconst withSass = require('@2012mjm/next-sass')\r\nmodule.exports = withSass({\r\n  /* config options here */\r\n})\r\n```\r\n\r\nCreate a `postcss.config.js`\r\n\r\n```js\r\nmodule.exports = {\r\n  plugins: {\r\n    // Illustrational\r\n    'postcss-css-variables': {}\r\n  }\r\n}\r\n```\r\n\r\nCreate a CSS file `styles.scss` the CSS here is using the css-variables postcss plugin.\r\n\r\n```css\r\n:root {\r\n  --some-color: red;\r\n}\r\n\r\n.example {\r\n  /* red */\r\n  color: var(--some-color);\r\n}\r\n```\r\n\r\nWhen `postcss.config.js` is not found `postcss-loader` will not be added and will not cause overhead.\r\n\r\nYou can also pass a list of options to the `postcss-loader` by passing an object called `postcssLoaderOptions`.\r\n\r\nFor example, to pass theme env variables to postcss-loader, you can write:\r\n\r\n```js\r\n// next.config.js\r\nconst withSass = require('@2012mjm/next-sass')\r\nmodule.exports = withSass({\r\n  postcssLoaderOptions: {\r\n    parser: true,\r\n    config: {\r\n      ctx: {\r\n        theme: JSON.stringify(process.env.REACT_APP_THEME)\r\n      }\r\n    }\r\n  }\r\n})\r\n```\r\n\r\n### Configuring Next.js\r\n\r\nOptionally you can add your custom Next.js configuration as parameter\r\n\r\n```js\r\n// next.config.js\r\nconst withSass = require('@2012mjm/next-sass')\r\nmodule.exports = withSass({\r\n  webpack(config, options) {\r\n    return config\r\n  }\r\n})\r\n```","readmeFilename":"README.md"}