vue-stylus-resources-loader

The ShakaCode team has availability to help your project as of 2018-03-27.

If your team might need my help, please email me for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products.

stylus-resources-loader

This loader will @import your stylus resources into every required stylus module. So you can use your shared variables & mixins across all stylus styles without manually importing them in each file. Made to work with CSS Modules!

Note, this loader is not limited to stylus resources. It supposedly works with less, post-css, etc. per issue 31.

Version 1.3.3 and great supports Webpack 4.

---

If you're using this project and you like it, please give us a star! Thanks!

Thank you from Justin Gordon and ShakaCode

• Video: Front-End Sadness to Happiness: The React on Rails Story: History, motivations, philosophy, and overview.
• Click here for talk slides.

We at ShakaCode are a small, boutique, remote-first application development company. We fund this project by:

• Providing priority support and training for anything related to React + Webpack + Rails in our Coaching Program.
• Building custom web and mobile (React Native) applications. We typically work with a technical founder or CTO and instantly provide a full development team including designers.
• Migrating Angular + Rails to React + Rails. You can see an example of React on Rails and our work converting Angular to React on Rails at egghead.io.
• Augmenting your team to get your product completed more efficiently and quickly.

My article "Why Hire ShakaCode?" provides additional details about our projects.

If any of this resonates with you, please email me, [e-mail]. I offer a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products.

We are currently looking to hire like-minded developers that wish to work on our projects, including Hawaii Chee.

I appreciate your attention and sharing of these offerings with anybody that we can help. Your support allows me to bring you and your team front-end happiness in the Rails world.

Aloha and best wishes from the ShakaCode team!

ShakaCode Community

Please Subscribe to keep in touch with Justin Gordon and ShakaCode. I intend to send a monthly summary including announcements of new releases of bootstrap-loader and React on Rails and of our latest blog articles and tutorials. Subscribers will also have access to exclusive content, including tips and examples.

• Slack Room: Contact us for an invite to the ShakaCode Slack room!
• forum.shakacode.com: Post your questions
• @ShakaCode on Twitter

React on Rails Info

React on Rails is ShakaCode's flagship product. We want to make sure you're aware of it!

Testimonials

From Joel Hooks, Co-Founder, Chief Nerd at egghead.io, January 30, 2017:

For more testimonials, see Live Projects and Kudos.

---

Installation

Get it via npm:

npm install stylus-resources-loader

Usage

Create your file (or files) with resources:

/* resources.scss */
 
$section-width: 700px;
 
@mixin section-mixin {
  margin: 0 auto;
  width: $section-width;
}

NB!

• Do not include anything that will be actually rendered in CSS, because it will be added to every imported stylus file.
• Avoid using stylus @import rules inside resources files as it slows down incremental builds. Add imported files directly in stylusResources array in webpack config instead. If you concerned about location of your resources index, you might want to check out the solution outlined in this comment.
• If you still want to use stylus @imports make sure your paths are relative to the file they defined in (basically, your file with resources), except the ones started with ~ (~ is resolved to node_modules folder).

Apply loader in webpack config (v1.x.x & v2.x.x are supported) and provide path to the file with resources:

/* Webpack@2: webpack.config.js */
 
module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      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.scss',
 
            // Or array of paths
            resources: ['./path/to/vars.scss', './path/to/mixins.scss']
          },
        },
      ],
    },
  ],
},
 
/* Webpack@1: webpack.config.js */
 
module: {
  loaders: [
    // Apply loader
    { test: /\.scss$/, loader: 'style!css!stylus!stylus-resources' },
  ],
},
 
// Provide path to the file with resources
stylusResources: './path/to/resources.scss',
 
// Or array of paths
stylusResources: ['./path/to/vars.scss', './path/to/mixins.scss'],

NOTE: If webpackConfig.context is not defined, process.cwd() will be used to resolve files with resource.

Now you can use these resources without manually importing them:

/* component.scss */
 
.section {
  @include section-mixin; // <--- `section-mixin` is defined here 
}

import React from 'react';
import css from './component.scss';
 
// ...
 
render() {
  return (
    <div className={css.section} />
  );
}

Glob pattern matching

You can specify glob patterns to match your all of your files in the same directory.

// Specify a single path
resources: './path/to/resources/**/*.scss', // will match all files in folder and subdirectories
// or an array of paths
resources: [ './path/to/resources/**/*.scss', './path/to/another/**/*.scss' ]

Note that stylus-resources-loader will resolve your files in order. If you want your variables to be accessed across all of your mixins you should specify them in first place.

resources: [ './path/to/variables/vars.scss', './path/to/mixins/**/*.scss' ]

VueJS webpack template

If you wish to use this loader in the VueJS Webpack template you need to add the following code in build/utils.js after line 42 :

if (loader === 'stylus') {
  loaders.push({
    loader: 'stylus-resources-loader',
    options: {
      resources: 'path/to/your/file.scss',
    },
  });
}

Contributing

This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the code of conduct.

See Contributing to get started.

License

MIT.

Example and Related Libraries

• react-webpack-rails-tutorial, live example at www.reactrails.com.
• bootstrap-loader