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

我有react应用程序，在网页中我有以下代码：

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

如何将

变量.styl

全局导入每个组件？我需要添加如下内容：

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

---

在此之后，此网页包以96%的速度停止，没有其他内容。

网页包配置中的大多数路径需要是完整路径（绝对路径，而不是相对路径）

试试这个：

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

，那么最初的三个导入可能就没有必要了。

对于使用Webpack 2+的用户，现在的做法是：

您的

webpack.config.js

const path=require（'path'））
module.exports={
模块：{
规则：[
{
测试：/\（styl|css）$/，
使用：[
“css加载程序”，
{
加载器：“手写笔加载器”，
选项：{
进口：[
path.resolve（uu dirname，'./app/assets/stylesheets/variables.styl'）//文件的路径
]
}
}
],
},            
],
}
}

您可以使用

样式资源加载器

为您的*.styl文件注入全局变量。

您能解释一下这个用例吗？例如，从这个文件：[link]（）我想把这个base.styl

@import./../theme/base“

导入到网页中，所以您希望从

base.styl

生成的CSS被全局包含（像常规样式表）？是的。但是如果您使用

样式加载器

，

需要

（或

导入

），则Web包中带有configure stylus>import>“my.styl”的方法不起作用样式表将向DOM添加一个

元素，在我看来这基本上就是您想要的。如果您在顶级JS文件（如您提到的项目中）中这样做，样式将自动成为常规CSS样式。我认为手写笔导入专门用于加载手写笔插件（但是，您可以尝试通过提供

variables.styl

的完整路径来查看它是否工作得更好）。