stylus是个好东西，兼容原生css的写法，简洁明了，功能强大。
最近开发项目中碰到一个问题，如何在全局中引入一次全局的stylus变量，而不用每个用到的文件都去引入一次，如果做不到全局引入，就会显得非常麻烦。
首先，题主想到的是直接在main.js中直接import进去，但是发现只有写死的样式才会生效，像我在这个base文件中定义的一些变量，在页面里根本不生效。
于是题主猜测，引入的时候，这个stylus文件就已经被编译成css文件并放在内联样式表里了，变量也被编译过了，所以在页面里再去使用，自然是找不到这个变量对应的值了。
后面度娘到了一个解决方案，照着敲了一下果然可以。
具体如下：
在build/utils.js的generateLoaders方法下做如下修改
var stylusOptions = {
import: [
path.join(__dirname, "../src/common/base.styl"), // base.styl全局变量文件
]
}
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus', stylusOptions),
styl: generateLoaders('stylus', stylusOptions),
}
题主刚开始只配置了styl
styl: generateLoaders('stylus', stylusOptions),
而没有配置stylus
stylus: generateLoaders('stylus', stylusOptions),
记住这两个都必须要加入stylusOptions，否则不会生效。
