由于stylus在引用时，不能像一般的css文件直接在main.js中引用，就算引用了也会只能使用转换后的css，不能使用里面的函数，方法等，原因可能是：在这里引入会被直接编译成css，不能在别的模板中引用一些函数啥的；所以夏敏介绍怎么全局引用。
一：先更改脚手架项目中的build -- webpack.base.conf.js 去让项目能够正常使用stylus,具体更改如下：
先安装 npm i style-loader stylus stylus-loader css-loader -S
module.exports = {
。。。。。
resolve: {
extensions: ['.js', '.vue', '.json', '.styl'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.styl$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'stylus-loader' }],
include: []
},
。。。。。。
}二：打开vue-cli脚手架项目里面的 build --- utils.js 文件，具体位置如下：
然后对这个文件进行下面的修改，来全局引入想要引入的全局使用的stylus文件：
exports.cssLoaders = function(options) {
........... //原来的部分不用修改的，省略号代替
var stylusOptions = {
import: [
path.join(__dirname, "../src/common/stylus/mixin.styl") // variables.styl全局变量文件
],
paths: [
path.join(__dirname, "../src/common/"),
path.join(__dirname, "../")
]
} //上面都是新加的内容，我这里是要引入 ../src/common/stylus/mixin.styl 这个全局的styl文件，来使用
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus', stylusOptions), //这个也是需要新加上的
styl: generateLoaders('stylus', stylusOptions) //这个也是需要新加上的
}
} 这样就可以在所有的vue模块中去使用这个stylus文件里面的样式和函数，方法等
注意，需要先安装 npm i stylus-loader --save-dev 和 npm i stylus --save-dev