React、Webpack、Stylus——为所有组件导入全局变量

Question

我有 React 应用程序，在 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'
    ]
}

在此 webpack 停止在 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')
  ]
}

（我认为如果它们在 variables.styl 中也得到 @import，则可能不需要前三个导入）。

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文件注入全局变量。

React、Webpack、Stylus——为所有组件导入全局变量

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

stylus

reactjs

webpack