Use Sass/Scss of Webpack in VueJS

Hi, If you are using Sass / Scss in VueJS development with WebPack, I will share my current folder structure practice to let you know how to organize these stylesheet file reasonably.

You can use previous articles I wrote — Part1, Part2, Part3 to create a Reusable and Scalable folder structure using vue-cli with vuejs if you no existing vuejs project currently.

Or

Check Out Source from Github !

First, This is a Output pic

Output Structure of Initial Setup

Of course, you can keep insert more New Folder or New Style Sheet File to grow up your project requirement. Now I just initial setup to make this structure reusable .

In this article, I would use Part3 final structure to demonstrate

Check Out Source from Github !

Step 1

We need to install a third-party package to shared Sass/Scss features without manually importing them in each file.

https://github.com/shakacode/sass-resources-loader

npm install sass-resources-loader --save-dev

Step 2

Suppose you are using vue-cli + webpack to initial project.

Go to the build/utils.js , Insert below generate sass-resources-loader function. The purpose is to monitor your specific stylesheet file and It can share toALL components also be used.

In below codes that mixins and vars folders can share to ALL components also be used.

https://gist.github.com/dc198689/9cf4ecfb4040d0a4564a561c27c81346

then return this function to sass and scss

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateSassResourceLoader(), // <---
  scss: generateSassResourceLoader(), // <---
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
}

Step 3

Well, go back to review the folder structure and I expanded the folder.

As you can see, globals , mixins , vars are inside the scss folder.

mixins and vars are also make the Folder Classification and index.scss just import sub-folder myself.

// index.scss (src/assets/scss/mixins/index.scss)
@import './breakpoints/index.scss';
@import './animations/index.scss';
@import './buttons/index.scss';
@import './tables/index.scss';
@import './transitions/index.scss';
// index.scss (src/assets/scss/index.scss)
@import './globals/index.scss';

In addition to mixins and vars folders, we also need to import the global style — class or id . In the src/assets/scss/index.scss , It would be import the globals stylesheet in vuejs root level.

Global Style Sheet Level

// index.scss (src/assets/scss/index.scss)
/**
 * Import Dependency
 */
@import './globals/index.scss'; <---

Root Level

// main.js (project/src/main.js)
/**
 * Import Global Style (.css/.scss)
 */
import 'element-ui/lib/theme-default/index.css' // Theme UI
import './assets/scss/index.scss' // Customize UI <---
/**
 * Import Dependency
 */
import Vue from 'vue'
import router from './router'
...
...
...

Step 4

Done ! Let me try the new style structure to help the Team Development.

Try Global Style Effect

Style Name should be named more generic to integrate every element you need.

In Stylesheet

// index.scss (scss/globals/index.scss)
/**
 * Globals
 */
.border-black {
  border: 1px solid #000;
}

In Component

// App.vue
<img src="./assets/img/logo.png" class="border-black">

In Browser Preview

In Browser Inspector

Try Mixins Effect

Style Name should be named more generic to integrate every element you need.

In Stylesheet

// index.scss (scss/mixins/tables/index.scss)
/**
 * Tables
 */
@mixin grid($flex) {
  @if $flex {
    transition: transform 1s;
  } @else {
    background: yellow;
  }
}

In Component

Without Import mixins file

// App.vue
<template>
  <div id="app">
    ...
    ...
  </div>
</template>
<style lang="scss">
  #app {
    ...
    ...
    @include grid(true); 
    ...
    ...  
  }
</style>

In Browser Inspector

Try Vars Effect

Style Name should be named more generic to integrate every element you need.

In Stylesheet

// index.scss (scss/vars/colors/index.scss)
$bg-white-light: #f5f5f5;

In Component

Without Import vars file

// App.vue
<style lang="scss">
  #app {
    ...
    ...
    background: $bg-white-light; 
    ...
    ...  
  }
</style>

In Browser Preview

In Browser Inspector

Production Mode

It ‘s the same output destination and effect.

npm run build

Conclusion

With this style structure, we can make more efficiency.

NOT NEED to import style sheet in every components

Extended Study

Project Source (Git)

https://github.com/dc198689/pear

Dynamic Translate using vue-i18n ( VueJS )

https://medium.com/@t198689/dynamic-translate-using-vue-i18n-vuejs-c730093a63e2

Reusable, Scalable and Easy to organize project using VueJS ( Part 1 )

https://medium.com/hong-kong-tech/reusable-scalable-and-easy-to-organize-project-using-vuejs-part-1-d08fa83b8581

Reusable, Scalable and Easy to organize project using VueJS ( Part 2 )

https://medium.com/hong-kong-tech/reusable-scalable-and-easy-to-organize-project-using-vuejs-part-2-c7e82044d7fc

Reusable, Scalable and Easy to organize project using VueJS ( Part 3 )

https://medium.com/hong-kong-tech/reusable-scalable-and-easy-to-organize-project-using-vuejs-part-3-ed8cba6b4dfe

To be Continue…