CODEWITHSUNDEEP
reactjswebpackstylus
Ingrid Oberbüchler
Ingrid Oberbüchler

Reputation: 846

React, Webpack, Stylus - import global variables to all components

I have react app and in webpack I have this code:

stylus: {
    use: [require('nib'), require('jeet')],
    import: [
        '~nib/lib/nib/index.styl',
        '~jeet/stylus/jeet/_jeet',
        '~rupture/rupture/index.styl'
    ]
}

How can I import my variable.styl to every component globally? I need add something like this:

stylus: {  
    import: [
        './app/styles/variables.styl'
    ]
}

after this webpack stopped at 96% and nothing else.

Upvotes: 2

Views: 2524

Answers (3)

S.oakland
S.oakland

Reputation: 1

You can use style-resources-loader to inject global variables for you *.styl files.

Upvotes: 0

Samuel Gonçalves
Samuel Gonçalves

Reputation: 1411

For those of you who are using Webpack 2+, this is the way to go now:

Your webpack.config.js

const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.(styl|css)$/,
                use: [
                    'css-loader',
                    {
                        loader: 'stylus-loader',
                        options: {
                            import: [
                                path.resolve(__dirname, './app/assets/stylesheets/variables.styl') // Path to the file
                            ]
                        }
                    }
                ],
            },            
        ],
    }
}

Upvotes: 0

robertklep
robertklep

Reputation: 203329

Most paths in the Webpack configuration need to be full paths (absolute, not relative).

Try this:

const path = require('path');
...
stylus: {  
  import: [
    '~nib/lib/nib/index.styl',
    '~jeet/stylus/jeet/_jeet',
    '~rupture/rupture/index.styl',
    path.resolve(__dirname, './app/styles/variables.styl')
  ]
}

(I think the initial three imports may not be necessary if they also get @import'ed in variables.styl).

Upvotes: 5

Related Questions