使用 webpack 全局导入 stylus 文件

【问题标题】：globally import stylus file with webpack使用 webpack 全局导入 stylus 文件
【发布时间】：2017-09-26 09:45:12
【问题描述】：

我已经使用“vue init webpack my-project”开始了一个带有 vue2 的新项目，我正在使用手写笔进行样式设置。到目前为止一切顺利，它编译了所有内容。

但现在我想要一个单独的文件 variables.styl 应该是全局的。

这意味着我不想在我的应用程序中的每个 .styl 文件中使用“@import('variables.styl')”。我已经搜索了 2 个小时，找不到任何好的东西。

为了这篇文章的篇幅，我不会在这里复制粘贴 webpack 文件的内容。但会为您提供此链接：click 它是我项目中包含 webpack 文件的“构建”目录

命令是“node build/dev-server.js”

【问题讨论】：

标签： webpack vuejs2 webpack-2 webpack-style-loader

【解决方案1】：

这适用于使用 vue-cli

创建的 vue 应用

根据stylus-loader，您可以通过import 选项将variables.styl 文件路径传递给stylus-loader 来实现此目的，我建议您在src 目录中创建新文件夹styles 以包含您所有的全局手写笔文件（变量、mixins、...），然后将此目录路径传递给导入选项。

在build/util.js之前的块开始
```
return {
    css: generateLoaders(),
    ...
```
定义变量var stylesDir = path.resolve(__dirname, '../src/styles') 这样以后会省去很多麻烦。
现在寻找写有stylus: generateLoaders('stylus') 的行并将这个{import: [stylesDir+'/*.styl']} 作为第二个参数传递给generateLoaders 函数。

它应该看起来像 stylus: generateLoaders('stylus', {import: [stylesDir+'/*.styl']})

【讨论】：