React、Webpack、Stylus - 将全局变量导入所有组件答案

【问题标题】：React, Webpack, Stylus - import global variables to all componentsReact、Webpack、Stylus - 将全局变量导入所有组件
【发布时间】：2016-08-03 08:27:10
【问题描述】：

我有 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% 之后，仅此而已。

【问题讨论】：

你能解释一下这个用例吗？
例如从这个文件：[link] (github.com/alejofernandez/react-stylus-webpack-boilerplate/blob/…) 我想把这个 base.styl @import "../../theme/base" 到 webpack
所以您希望从base.styl 生成的CSS 被全局包含（就像常规样式表一样）？
是的..但是 webpack 中使用 configure stylus > import > 'my.styl' 的方法不起作用
如果你使用style-loader、require'ing（或importing），样式表会在DOM中添加一个<link>元素，在我看来这基本上是什么你要。如果您在顶级 JS 文件中执行此操作（例如您提到的项目中的 src/index.js），样式将自动成为常规 CSS 样式。我认为 Stylus-import 专门用于加载 Stylus 插件（但是，您可以尝试通过提供 variables.styl 的完整路径来查看它是否工作得更好）。

标签： reactjs webpack stylus

【解决方案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'ed）。

【讨论】：

【解决方案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
                            ]
                        }
                    }
                ],
            },            
        ],
    }
}

【讨论】：

【解决方案3】：

您可以使用style-resources-loader 为您的 *.styl 文件注入全局变量。

【讨论】：