{"_id":"@atlea/next-sass","_rev":"1-828d711846c85391501a26486109bbce","name":"@atlea/next-sass","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atlea/next-sass","version":"1.0.0","main":"index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/atlea/next-plugins.git"},"dependencies":{"@atlea/next-css":"1.0.0","sass-loader":"^7.3.1"},"devDependencies":{"node-sass":"^4.12.0"},"gitHead":"31e8978d07e5468f760a222a72d1e8f3f457e6ff","description":"Import `.sass` or `.scss` files in your Next.js project","bugs":{"url":"https://github.com/atlea/next-plugins/issues"},"homepage":"https://github.com/atlea/next-plugins#readme","_id":"@atlea/next-sass@1.0.0","_nodeVersion":"12.5.0","_npmVersion":"6.11.1","dist":{"integrity":"sha512-8cvgnXsvKgTJS59gGfi/Ca1YM6WrZZk02sh0aHe34cYzDMCzQkpHLh+kqDFxiphpsaL+5AgClUdLdMMMzcIjvQ==","shasum":"2ff9eb0aa1277c528082f21391f03726f22e3ac9","tarball":"https://registry.npmjs.org/@atlea/next-sass/-/next-sass-1.0.0.tgz","fileCount":3,"unpackedSize":5482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdYxFvCRA9TVsSAnZWagAAPiYP/04EYiTO4uPnZNfPnWg4\niOnQadsgcNgEIUmUNYWTY9iLywkkwv6aowBk/cl1QQzytJCW2lA+4Xg8++zg\no/pV1ZHRStcxH9gFA1Fl9jsJHLtx6WaTg+EacV2roro1l38qnwfx9UN6Nge5\n0nsFJJiW0i0D2Cl3jXN5Iet7LxL7oBVDOF3QqvtaBIqXk+PsUaVzbgphhJQR\nl1likkCEe+nvVB1bQewHjujK7NltOkjPxh5EE0gO87LWrLgYO2Q4eOOXvwiJ\nOEudzT8xqRCU8DJEnfudSwKtXMtOXOCbhkrOp8S6LU9d6g6kpdXSFhXJsvKF\nDTRYQY9rnlI49/AUTuVJodB3gMrF1AFHFnKmhJ/bCRIVaIeRh6xPYoJAc5Qe\nCPQLsFvdrqJ8RQdQ3n5ArkCFzZ/G/OXx4hh+jkMxy1idfdtbe2GMyEgFP7lS\nnSUQKS0M3nEmCp6rJ0lenkG/83Qic2WGOvvkSBs3DPsvmPgg2nov2e7CpOYp\n5X9ijS8BfTjNKEMQuSmawdOYbErZbS9G+bnsaVfZFLXmGnka9Y9M+Z5QLvEM\nQxmti3iv1YdF+ALncqYCx7U03dXzUpK5Z6mxNNLjZdOGRLjU2AB85f0Xq6e0\nwTo8u0xtfMuBMCrtBccZXDF3vJg2VOloIRBtM5KIDQz/nOTyubvbcW5MnuFh\ntrHE\r\n=K0fD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjZUFF81nShSwZ7tNFN0etEOMJQJqT8Eu6VQQhzHkb8QIhAIYeE8NkPrpH9Eqj+DdbplrgFBYEeNlCv79qwbOng2Hg"}]},"maintainers":[{"name":"tylerian","email":"jairo.eog@outlook.com"}],"_npmUser":{"name":"tylerian","email":"jairo.eog@outlook.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-sass_1.0.0_1566773614864_0.5602330191154581"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-25T22:53:34.664Z","1.0.0":"2019-08-25T22:53:34.940Z","modified":"2022-04-04T16:12:56.129Z"},"maintainers":[{"name":"tylerian","email":"jairo.eog@outlook.com"}],"description":"Import `.sass` or `.scss` files in your Next.js project","homepage":"https://github.com/atlea/next-plugins#readme","repository":{"type":"git","url":"git+https://github.com/atlea/next-plugins.git"},"bugs":{"url":"https://github.com/atlea/next-plugins/issues"},"license":"MIT","readme":"# Next.js + Sass\n\nImport `.sass` or `.scss` files in your Next.js project\n\n## Installation\n\n```\nnpm install --save @atlea/next-sass node-sass\n```\n\nor\n\n```\nyarn add @atlea/next-sass node-sass\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 withSass = require('@atlea/next-sass')\nmodule.exports = withSass({\n  /* config options here */\n})\n```\n\nCreate a Sass file `styles.scss`\n\n```scss\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.scss\"\n\nexport default () => <div className=\"example\">Hello World!</div>\n```\n\n### With CSS modules\n\n```js\n// next.config.js\nconst withSass = require('@atlea/next-sass')\nmodule.exports = withSass({\n  cssModules: true\n})\n```\n\nCreate a Sass file  `styles.scss`\n\n```scss\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.scss\"\n\nexport default () => <div className={css.example}>Hello World!</div>\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 withSass = require('@atlea/next-sass')\nmodule.exports = withSass({\n  cssModules: true,\n  cssLoaderOptions: {\n    importLoaders: 1,\n    localIdentName: \"[local]___[hash:base64:5]\",\n  }\n})\n```\n\nCreate a SCSS file `style.scss`\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.scss\"\n\nconst Component = props => {\n  return (\n    <div className={css.example}>\n      ...\n    </div>\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### With SASS loader options\n\nYou can pass options from [node-sass](https://github.com/sass/node-sass#options)\n\n```js\n// next.config.js\nconst withSass = require('@atlea/next-sass')\nmodule.exports = withSass({\n  sassLoaderOptions: {\n    includePaths: [\"absolute/path/a\", \"absolute/path/b\"]\n  }\n})\n```\n\n### PostCSS plugins\n\nCreate a `next.config.js` in your project\n\n```js\n// next.config.js\nconst withSass = require('@atlea/next-sass')\nmodule.exports = withSass({\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 withSass = require('@atlea/next-sass')\nmodule.exports = withSass({\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 withSass = require('@atlea/next-sass')\nmodule.exports = withSass({\n  webpack(config, options) {\n    return config\n  }\n})\n```\n","readmeFilename":"readme.md"}