使用带有 webpack 的自定义手写笔包？答案

【问题标题】：Use a custom stylus package with webpack?使用带有 webpack 的自定义手写笔包？
【发布时间】：2018-01-28 22:16:01
【问题描述】：

我有一个自定义手写笔包托管在一个私人 github 存储库中，我将其包含在我的包清单中。在npm install 之后，它现在位于我的node_modules 目录中，其目录结构类似于：

node_modules
|
----my-custom-package
    |
     ----package.json
         webpack.config.js
         src/
         |
         ----index.js (which just imports css/index.styl)
             css/
             |
             ----index.styl
                 ...bunch of other .styl files

使用 webpack 1.13 和 stylus loader 2.5.1，我如何设置它以能够导入和使用自定义包中的所有内容？我的 webpack 配置文件中是否有可以加载文件的内容？我是否在我的基本 .styl 文件中包含某种 @require 'my-custom-package'？我的条目App.js 文件中有import 'my-custom-package'？

【问题讨论】：

标签： webpack config node-modules stylus

【解决方案1】：

这就是我最终做的：

在我的应用程序的index.styl 中，我需要自定义样式文件（~ 是node_modules 目录的简写）：

@require '~my-custom-package/src/css/index';

然后在我的 webpack 配置中，我编辑了我的 stylus loader 以包含我的自定义包的路径并添加了 resolve url 以便 stylus-loader 可以解析我的自定义包 styl 文件中的相对路径：

{
    test: /\.styl$/i,
    include: [
      path.join(__dirname, 'src'),
      path.join(__dirname, 'node_modules', 'my-custom-package')
    ],
    loader: 'style-loader!css-loader!stylus-loader?resolve url'
  }

【讨论】：