React, Webpack, Stylus - импортировать глобальные переменные во все компоненты

Question

У меня есть приложение "Реакция" и в Webpack у меня есть этот код:

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

Как я могу импортировать мой variable.styl к каждому компоненту во всем мире? Мне нужно добавить что-то вроде этого:

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

после этого вебпак остановился на 96% и больше ничего.

Answer 1

Большинство путей в конфигурации Webpack должны быть полными (абсолютными, а не относительными).

Попробуй это:

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')
  ]
}

(Я думаю, что первые три импорта могут не понадобиться, если они также получают @import'в variables.styl).

Answer 2

Для тех из вас, кто использует Webpack 2+, это путь сейчас:

Твой 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
                            ]
                        }
                    }
                ],
            },            
        ],
    }
}

Answer 3

Вы можете использовать style-resources-loader для внедрения глобальных переменных в файлы *.styl.