Styles

In this section of the tutorial we'll discuss what's involved in structuring styles...

Install Sass and Stylus

Let's install Sass (for working with Vendors) and Stylus (for cleaner syntax in our own styles) and their respective loaders for Webpack:

$ npm install sass-loader node-sass stylus stylus-loader --save-dev 	

Load Variables and Functions to All Components

It's not well documented but you can load your Stylus variables/functions/mixins to all Vue components easily. (Because we aren't loading any actual styles here, we won't have any files unnecessarily exported in our final CSS multiple times). Update the following stylus and styl properties in the return statement here:

build/utils.js

exports.cssLoaders = function (options) {  
  // ...  

  return {
    // ...
    stylus: generateLoaders('stylus', { import: ['~src/styles/stylus/utils/utils.styl'] }),
    styl: generateLoaders('stylus', { import: ['~src/styles/stylus/utils/utils.styl'] })
  }
}

Overriding Styles in Vendor Components

Whenever you need to override some vendor styles (even if the vendor has them scoped in a component), you can just increase the specificity of your CSS by adding a document-level #app to your styles. This is easily done with Stylus. You just need to add #app to the top of the file.

Sass Folder Structure

Since we're using Stylus, we'll just have a few Sass files to handle vendor variables and imports. Sass (particularly SCSS) is very popular, so it's good to have a folder specifically for loading vendor packages who use this language. You can load them and override any variables here.

Here's a breakdown of the Sass directory structure found in src/styles/scss:

File	Description
_variables.scss	Add overrides for vendor variables here. For new variables, use the Stylus folder instead. I've added some Buefy/Bulma variables already here. The underscore denotes that this file is a sub-module and would not be loaded directly at the project's entry point.
_vendor.scss	Load up your vendor SCSS files here, in the order you want them. Here's where we load up Buefy/Bulma styles.

File	Description
utils/utils.styl	Entry point for the folder. Contains all files we need to load before any other styles are loaded (preprocessor utilities and variables). We'll also import this into every Vue component.
utils/variables.styl	Variables (ie. theming).
utils/functions.styl	Functions.
utils/mixins.styl	Mixins.
base/base.styl	Entry point for the folder. Contains all the files for normalizing across browsers, generic HTML tag styling, resets, etc.
base/generic.styl	Any rules you want to set for generic HTML tags. Since we're using Bulma in this project, this is mostly taken care of here.
base/helpers.styl	Put helper classes here. Add anything you want to add that Bulma doesn't offer. Remember to prefix our own helpers so we can know which is which throughout our app.
base/reset.styl	Browser normalization here. Add anything you want to build on top of Bulmas reset.
base/transitions.styl	Just a place you can put all your transitions.
components/components.styl	Entry point for the folder. Contains all files we need for CSS-only components (Vue component styles are placed directly into the .vue files). A card or panel might be an example of a component.
elements/elements.styl	Entry point for the folder. Contains all the files we need for CSS-only elements. A link or a button might be an example of an element.
vendor/vendor.styl	Entry point file that contains all the style imports from vendor packages.