Introduction

Add style-resources-loader to your project easier.

Installation

vue add style-resources-loader

Config

Define your resource's patterns under pluginOptions > style-resources-loader in file vue.config.js.

Name	Data type	Description
preProcessor	{string}	One of: sass, scss, stylus, less
patterns	{string	string[]}
injector	{Function	'prepend'

patterns

Please read more at patterns.

Example

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'preProcessor': 'stylus',
      'patterns': [
        path.resolve(__dirname, './src/styles/abstracts/*.styl'),
      ],
      'injector': 'append'
    }
  }
}

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'preProcessor': 'stylus',
      'patterns': [
        path.resolve(__dirname, 'path/to/stylus/variables/*.styl'),
        path.resolve(__dirname, 'path/to/stylus/mixins/*.styl')
      ],
      'injector': (source, resources) => {
        const combineAll = type => resources
            .filter(({ file }) => file.includes(type))
            .map(({ content }) => content)
            .join('');

        return combineAll('variables') + combineAll('mixins') + source;
    }
    }
  }
}

License