stylus-resources-loader

stylus-resources-loader

Stylus resources loader for Webpack, inspired by sass-resources-loader.

Loading a global settings file

A common request is to be able to load a settings file in each component without the need to explicity import it each time, e.g. to use stylus variables globally throughout all components. To accomplish this:

npm install stylus-resources-loader --save-dev

Then add the following webpack rule:

module: {
  rules: [
    // Apply loader
    {
      test: /\.(styl|stylus)$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'stylus-loader',
        {
          loader: 'stylus-resources-loader',
          options: {
            // Provide path to the file with resources
            resources: './path/to/resources.styl',

            // Or array of paths
            resources: ['./path/to/vars.styl', './path/to/mixins.styl']
          }
        }
      ]
    }
  ]
},

As an example, if you are using vuejs-templates/webpack, modify build/util.js like so:

stylus: generateLoaders('stylus').concat(
  {
    loader: 'stylus-resources-loader',
    options: {
      resources: './path/to/resources.styl'
    }
  }
),