In vue-cli 3, a stylus, sass styles incoming shared global variables

Sometimes in development, we have defined a number of basic style variables, such as:

Vue large number of single-file assembly will use these variables, each component introduced once too much trouble. Global introduction is a good way, then, the introduction of variable.styl file in main.js in, but you will find that does not work.

After reviewing the vue cli official document discovery, there are ways of official support.

• 1, sass style to incoming shared global variables

Sometimes you want to pass options to the preprocessor loader webpack of. You can use  vue.config.js the  css.loaderOptions option. For example, you can pass this global variable to share all Sass style:

Vue.config.js // 
module.exports = { 
  CSS: { 
    loaderOptions: { 
      // Loader-pass options to Sass 
      Sass: { 
        alias @ / is src / of 
        // it is assumed that you have `src / variables. this document scss` 
        Data: `@import" ~@/variables.scss ";` 
      } 
    } 
  } 
}

　　2, to the style stylus incoming shared global variables

// vue.config.js file 

module.exports = { 
  CSS: { 
    loaderOptions: { 
      // delivery options to a stylus-loader 
      Stylus: { 
        Import: '~@/common/stylus/color.styl' 
      } 
    } 
  } 
}