{"resource":{"author":{"id":"h2so9H8jPMmgUKGghoNl","name":"Yomesh Gupta","username":"yomeshgupta"},"content":{"link":null,"difficulty":4,"domain":2,"type":1,"isInternal":true,"body":"Remix is the newest JavaScript framework in the developer community right now. It is a full-stack web framework that focuses on core web fundamentals to deliver a blazing-fast user experience. We will discuss how we can use SASS with Remix.\n\n## How does styling work in Remix?\n\n[Remix](https://remix.run/docs/en/v1/guides/styling \"Remix Styling Guide\") uses the good old way of adding a simple `<link rel=\"stylesheet\">` tag to the webpage for styling. If a route is active then stylesheet is added to the page. When a route is inactive then the stylesheet is removed. It is simple, effective, and helps in avoiding styling clashes.\n\nNow, for stylesheets, or any link, to show up on the page, we need to let Remix know about them. We can do so by exporting a `links` function that should return an array. Each entry in the array corresponds to a `link` tag in the head of the document.\n\n```js\n// login.js\nimport loginStyles from \"~/styles/login.css\";\n\nexport function links() {\n  return [\n    {\n      rel: \"stylesheet\",\n      href: loginStyles\n    }\n  ]\n}\n...\n```\n\n## Can we provide our SASS files as links?\n\nThe `href` for a stylesheet should link to a plain CSS file because that is what browsers understand! We can link our SASS files as long as we provide the generated plain CSS. Importing SASS file directly into a component or route simply won't work.\n\n## How to make it work?\n\nLet us say we want to style our `Login` page and we have our styling stored in the `login.scss` file.\n\nWe need to find a way to compile our SASS files and provide the generated css for Remix to process. In a normal webpack setup, we can simply use loaders like `sass-loader`, plugins like `MiniCssExtractPlugin`, and call it a day! The webpack will know how to process the asset and take care of everything.\n\nWith Remix, we need to manually process the sass files. We need a simple package to make it work.\n\n- [node-sass](https://www.npmjs.com/package/node-sass \"Node Sass npm package\") provides binding Node.js to LibSass (The C version of Sass).\n\n### Setting up\n\n1. Create a new remix app\n\n```bash\nnpx create-remix@latest\n# choose Remix App Server\ncd [whatever you named the project]\n```\n\nNow, our directory structure would look like the following\n\n```\nmy-remix-app\n├── app\n│   └── routes\n│   └── styles\n```\n\nThe `styles` folder will contain all the `.css` files.\n\n2. Create & add stylesheets to a `styles/` folder next to `app/`\n\n```bash\nmkdir styles\ncd styles\ntouch login.scss\n```\n\n```\nmy-remix-app\n├── app\n│   └── routes\n│   └── styles\n├── styles\n│   └── login.scss\n```\n\n3. Install the package\n\n```bash\nnpm i node-sass\n```\n\n4. Add scripts to `package.json` that will process the files in `styles/` and write them to `/app/styles/` where Remix modules can import them.\n\n```js\n{\n  \"scripts\": {\n    \"build:css\": \"node-sass ./styles -o ./app/styles --output-style compressed\",\n    \"dev:css\": \"npm run build:css && node-sass -rw ./styles -o ./app/styles\"\n  }\n}\n```\n\n5. Use it! During development, open a terminal tab and run the watch script\n\n```bash\nnpm run dev:css\n```\n\nThis will initially build all your scss files and then recursively watch all directories & files.\n\nWhen building for production, run\n\n```bash\nnpm run build:css\n```\n\nNow, styling in our `styles/login.scss`\n\n```css\n.wrapper {\n  background-color: red;\n  display: flex;\n\n  button {\n    color: white;\n  }\n}\n```\n\nwill be compiled to `app/styles/login.css`\n\n```css\n.wrapper {\n  background-color: red;\n  display: flex;\n}\n\n.wrapper button {\n  color: white;\n}\n```\n\nRemix modules can import it as any other css file!\n\n## Points to remember\n\n1. If you create a new scss file then you have to restart the watch process.\n2. You can run these processes together with something like [concurrently](https://www.npmjs.com/package/concurrently).\n\n<!-- Now, we can use `node-sass` to compile our sass files and make them available to Remix. -->\n\nIf you want to learn more useful and real-world Frontend related content then check out our [YouTube channel](https://www.youtube.com/watch?v=qMkUziVZvzs&list=PL4ruoTJ8LTT8250F2ZrYVmRO6o5gWZKpG) below.\n\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/qMkUziVZvzs\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n","languages":[],"editorConfig":{}},"stats":{"views":30680,"used":0,"likes":0},"description":"","published":true,"isActive":true,"tags":["remix","js framework","dev tooling","sass","css","styling","frontend"],"slug":"setting-up-sass-with-remix-run---rid---lXDyMjDSdDZDXxNcJ2ep","isPremium":false,"categories":[],"requires":[],"_id":"61eeae76c596de5b12fea561","title":"Setting Up SASS With Remix Run","resourceId":"lXDyMjDSdDZDXxNcJ2ep","createdAt":1643032182296,"modifiedAt":1643270565545},"currentUser":null,"isOwner":false,"recommendations":{"questions":[{"_id":"66ff9386a8080067335fe155","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["javascript","array","frontend","ui","polyfills","problem solving","interview questions","tutorial","programming","frontend interview question"],"slug":"how-to-implement-array-prototype-filter-javascript-interview-question-or-array-polyfills---qid---lO9mBM3raIZiRpAs7amO","title":"How to implement Array.prototype.filter? JavaScript Interview Question | Array Polyfills","questionId":"lO9mBM3raIZiRpAs7amO"},{"_id":"5ef4485a3cce8c36cd292530","content":{"difficulty":2,"languages":"javascript"},"tags":["javascript","frontend","node.js","array","javascript engines","frontend fundamentals","rest parameter","advanced js","es6"],"slug":"what-would-be-the-output-array-sum-problem---qid---4hOTkSZiTNbVDZ4keKlW","title":"What would be the output? (Array sum problem)","questionId":"4hOTkSZiTNbVDZ4keKlW"},{"_id":"60ce47a8e541233080dcd5c5","content":{"languages":["react"],"difficulty":4},"tags":["javascript","react","react hooks","frontend","javascript fundamentals","interview questions","frontend fundamentals"],"slug":"how-to-build-a-custom-timer-hook-in-react-js-or-usetimer-or-javascript-interview-question---qid---H5KlkIeowa1LrIn1mSN5","title":"How to build a custom timer hook in React.js? | useTimer | JavaScript Interview Question","questionId":"H5KlkIeowa1LrIn1mSN5"},{"_id":"66753431407950304707f1ed","content":{"languages":["javascript","typescript"],"difficulty":4},"tags":["javascript","atlassian","frontend","ui","ux","devtools tech","google","coding","programming","tutorials","blog"],"slug":"how-to-implement-feature-flag-functionality-atlassian-frontend-interview-question---qid---af1JERRj92CZPrEyLl5z","title":"How to implement feature flag functionality? Atlassian Frontend Interview Question","questionId":"af1JERRj92CZPrEyLl5z"},{"_id":"6215e6591641361c7c65de90","content":{"difficulty":3,"languages":"javascript"},"tags":["javascript","frontend","coding","architecture","js fundamentals","web","system design"],"slug":"how-would-you-implement-pagination-in-a-frontend-application-or-javascript-interview-questions-or-frontend-architecture---qid---IL8Whw2ayeqmg0kvHQLd","title":"How would you implement pagination in a frontend application? | JavaScript Interview Questions | Frontend Architecture","questionId":"IL8Whw2ayeqmg0kvHQLd"}],"resources":[{"_id":"5f2af665f81d6d48b5c4cd05","content":{"difficulty":2,"domain":16,"type":2},"tags":["data structures","algorithms","dynamic programming","interviews","interview preparation","code","programming","backend","frontend"],"slug":"dynamic-programming-playlist-or-coding-or-interview-questions-or-tutorials-or-algorithm---rid---Gk2BameUXnvutf6jDwCA","title":"Dynamic Programming Playlist | Coding | Interview Questions | Tutorials | Algorithm","resourceId":"Gk2BameUXnvutf6jDwCA"},{"_id":"694fda82e4605484c24c29de","content":{"difficulty":4,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","urls","ui","ux","frontend system design","questions","resources","tooling"],"slug":"urls-and-routing-in-frontend-applications---rid---n9dDAOaX0nmLvjnDn0uU","title":"URLs and Routing in Frontend Applications","resourceId":"n9dDAOaX0nmLvjnDn0uU"},{"_id":"5f1dd731cbec5f7ffc0c2fab","content":{"difficulty":2,"domain":3,"type":1,"isInternal":true},"tags":["node.js","express","rest","api","framework","backend","tools","devtools","framework development","build express"],"slug":"build-your-own-expressjs-or-part-2---rid---negw30VulwpaVLRpxxMl","title":"Build your own expressjs | Part 2","resourceId":"negw30VulwpaVLRpxxMl"},{"_id":"631444c477f9961d5b7cfc27","content":{"difficulty":1,"domain":2,"type":2,"isInternal":false},"tags":["javascript","frontend","web performance"," devtools tech","advanced js","interview preparation","cls","tooling","web.dev","seo","optimise"],"slug":"how-to-improve-performance-of-your-website-or-cumulative-layout-shift-or-part-1---rid---iFdJmQ4rTsUUv72yhH59","title":"How to Improve Performance of Your Website!? | Cumulative Layout Shift | Part 1 ","resourceId":"iFdJmQ4rTsUUv72yhH59"},{"_id":"5f2c0c39f81d6d48b5c4cd06","content":{"difficulty":1,"domain":2,"type":1},"tags":["frontend","html","css","webpage performance","css3","page load times"],"slug":"content-visibility-the-new-css-property-that-boosts-your-rendering-performance---rid---qB5R8n3HZ3NWdukfs7zu","title":"content-visibility: the new CSS property that boosts your rendering performance","resourceId":"qB5R8n3HZ3NWdukfs7zu"}]}}