{"id":2123,"date":"2021-08-26T12:50:36","date_gmt":"2021-08-26T12:50:36","guid":{"rendered":"https:\/\/blog.embold.io\/?p=2123"},"modified":"2021-09-14T07:51:31","modified_gmt":"2021-09-14T07:51:31","slug":"how-to-use-global-sass-styles-in-gatsby","status":"publish","type":"post","link":"https:\/\/blog.embold.io\/fr\/how-to-use-global-sass-styles-in-gatsby\/","title":{"rendered":"How to use global Sass styles in Gatsby?"},"content":{"rendered":"\n

First, if you want to use Sass in your Gatsby project, you need to install the gatsby-plugin-sass<\/a> and a sass compiler dependency to convert your .scss files to CSS. The popular node-sass is now deprecated<\/a>, so you should be installing the dart-sass<\/a> package. 
npm install sass gatsby-plugin-sass <\/code><\/p>\n\n\n\n

plugins: [\n      `gatsby-plugin-sass`\n],<\/code><\/pre>\n\n\n\n
Then can write your styles in.scss<\/code> or .sass<\/code> files and import them into any component file as usual.<\/p>\n\n\n\n
Now to adding global styles. There are two ways to add global styles that you\u2019ll like to use across several component or style files in Gatsby: via the layout component or the gatsby-browser.js file.<\/p>\n\n\n\n
Using the layout component<\/h1>\n\n\n\n
Every new Gatsby project ships with a default file titled layout.css and layout.js in src\/components folder. Rename layout.css tolayout.scss<\/code> and write your global styles in it. Then update the import command in layout.js. 
import \u201c.\/layout.scss\u201d<\/code>
 If your Gatsby site doesn\u2019t have those two files, create them in the src\/components folder and do the same. This will make all the variables, functions, and mixins in the layout.scss<\/code> file globally available. <\/p>\n\n\n\n
Using gatsby-browser.js<\/h1>\n\n\n\n
If you don\u2019t want to provide global styles via the layout file, create a file named gatsby-browser.js<\/code> in the root of your project folder if it doesn’t exist already. <\/p>\n\n\n\n
Create your global stylesheet file and define styles as desired, then import the file into the gatsby-browser.js<\/code> file: 
import \".\/src\/styles\/global.css\"<\/code><\/p>\n\n\n
Blog Credits: Linda Ikechukwu<\/span><\/p>\n
\u201d Linda Ikechukwu is a Frontend Developer turned Technical Content Consultant. She enjoys strategizing on and creating content that helps tech startups connect with their target audience. \u201c
\"\"<\/div>","protected":false},"excerpt":{"rendered":"
First, if you want to use Sass in your Gatsby project, you need to install the gatsby-plugin-sass and a sass compiler dependency to convert your .scss files to CSS. The…<\/p>\n","protected":false},"author":10,"featured_media":2125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[153,161,162,159,163,160],"better_featured_image":{"id":2125,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":3000,"height":2000,"file":"2021\/08\/Embold-Blog-Sass.jpg","sizes":{"thumbnail":{"file":"Embold-Blog-Sass-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-150x150.jpg"},"medium_large":{"file":"Embold-Blog-Sass-768x512.jpg","width":768,"height":512,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-768x512.jpg"},"penci-full-thumb":{"file":"Embold-Blog-Sass-1170x780.jpg","width":1170,"height":780,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-1170x780.jpg"},"penci-slider-thumb":{"file":"Embold-Blog-Sass-1170x663.jpg","width":1170,"height":663,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-1170x663.jpg"},"penci-magazine-slider":{"file":"Embold-Blog-Sass-780x516.jpg","width":780,"height":516,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-780x516.jpg"},"penci-slider-full-thumb":{"file":"Embold-Blog-Sass-1920x800.jpg","width":1920,"height":800,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-1920x800.jpg"},"penci-single-full":{"file":"Embold-Blog-Sass-1920x1280.jpg","width":1920,"height":1280,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-1920x1280.jpg"},"penci-thumb":{"file":"Embold-Blog-Sass-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-585x390.jpg"},"penci-masonry-thumb":{"file":"Embold-Blog-Sass-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-585x390.jpg"},"penci-thumb-square":{"file":"Embold-Blog-Sass-585x585.jpg","width":585,"height":585,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-585x585.jpg"},"penci-thumb-vertical":{"file":"Embold-Blog-Sass-480x650.jpg","width":480,"height":650,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-480x650.jpg"},"penci-thumb-small":{"file":"Embold-Blog-Sass-263x175.jpg","width":263,"height":175,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-263x175.jpg"},"jr_insta_square":{"file":"Embold-Blog-Sass-640x640.jpg","width":640,"height":640,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass-640x640.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":2123,"source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Sass.jpg"},"translation":{"provider":"WPGlobus","version":"2.10.8","language":"fr","enabled_languages":["en","es","de","fr","ru"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"de":{"title":false,"content":false,"excerpt":false},"fr":{"title":false,"content":false,"excerpt":false},"ru":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/posts\/2123"}],"collection":[{"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/comments?post=2123"}],"version-history":[{"count":5,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/posts\/2123\/revisions"}],"predecessor-version":[{"id":2198,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/posts\/2123\/revisions\/2198"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/media\/2125"}],"wp:attachment":[{"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/media?parent=2123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/categories?post=2123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/tags?post=2123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}