How I use Scss variables, mixins & functions globally in Nuxt.js

Since I started making websites 3.5 years ago I’ve been using Sass. I flipping LOVE IT!!! I feel it fills in a lot of CSS’s missing features as well as making my styles much leaner and easier to work with. I’m trying to really make 2018 a year where I conquer VueJs. There’s a problem. I still want to have my Sass variables, functions and mixins available to all my single file Vue components. I also want to have a bunch if global CSS utility classes being created using the same variables, functions and mixins. Here’s how I go about this. Compiling Sass I have a collection of styles that I port over to each now project no matter whether I’m using , Rails or WordPress. (Badger SCSS will be getting released in April 2018). All my CSS selectors are utility classes that I wanted available for my Nuxt project. It’s super easy to do! I have a single Sccs file that I use to import all my separate SCSS files so this will be the file I want to compile from. You can include multiple files if you’d like but I really recommend having a single clean file that just takes care of all your importing. Vue.js Toolkit Ensure you and installed; node sass sass-loader npm i -D node-sass sass-loader 2. In your file include your SCSS where you import all your other SCSS. nuxt.config.js css: ['@/assets/scss/main.scss'] LIKE MAGIC! Now your SCSS is getting compiled and will be automatically inserted into a tag in your head. For more info checkout the Nuxt.js docs on CSS. Edit 2/2/2019 — Updated Nuxt module instructions Nuxt Style Resources Module The awesome Nuxt community has created a package to take away ALL the pain of exposing Sass/SCSS files to your Vue.js components. While I did manage to expose files without this package, it was a bit of a pain. Install the package; npm i -D 2. You’ll need to make Nuxt aware of which file you want to be exposed by updating your ; nuxt.config.js module.exports = {// Other nuxt.config.js modules: \['@nuxtjs/style-resources'\], styleResources: { scss: \[ 'assets/scss/file/\_path.scss', 'assets/scss/file/\_path-two.scss' \] } } It’s really THAT simple. For more information and detailed docs checkout the . Nuxt Style Resource loader’s Github repo Any questions/comments/bugs/feedback please get in touch! Thanks for reading. Old loading Sass loading plugin This plugin is now deprecated but this was how I used to access but this was my old instructions Nuxt Sass Resources Loader The awesome has created a package to take away ALL the pain of exposing Sass/SCSS files to your Vue.js components. While I did manage to expose files without his package, it was a bit of a pain. If you’re keen to do it on your own check out this Github issue thread where Sébastien Chopin shows you how to do it. Antério Vieira Install the package; npm i nuxt-sass-resources-loader 2. You’ll need to make Nuxt aware of which file you want to be exposed by updating your ; nuxt.config.js module.exports = {// Other nuxt.config.js modules: \[ \[ 'nuxt-sass-resources-loader', \[ 'assets/scss/file/\_path.scss', 'assets/scss/file/\_path-two.scss' \] \] \] } It’s really THAT simple. For more information and detailed docs checkout the . Nuxt Sass resources loader’s Github repo