Webpack：在使用加载程序编译预处理样式时，是否可以包含一组全局样式？

我不确定这是否可行，而且似乎找不到任何相关信息。我已经用手写笔加载程序设置了网页包，允许将

.styl

文件直接导入js模块

我面临的问题是，预处理器上下文以单个

.styl

文件开始和结束

我希望能够定义全局样式，例如：

// global.styl

$brand-var1 = #000;
$brand-var2 = #FFF;

导入的单个

.styl

文件可以依赖这些文件：

// my-comp.styl

button {
  background-color: $brand-var1;
}

通过js组件

// my-comp.js

import './my-comp.styl'
...

我希望避免在使用它的每个手写笔文件中导入或要求全局样式

---

是否有允许我执行此操作的网页包配置

Webpack 2:在规则中，您可以将

import

选项传递到

stylus loader

以全局加载样式：

  {
    test: /\.styl$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'stylus-loader',
        options: {
          import: [
            resolve(__dirname, 'src/styles/global.styl')
          ]
        }
      }
    ],
    exclude: /node_modules/
  }

---

在webpack中，我是这样使用的：

module.exports = {
  ...,
  stylus: {
    import: [
      path.resolve(__dirname, './src/styles/globals.styl')
    ]
  }
}

---

网页包2：在规则中，您可以将

import

选项传递到

stylus loader

以全局加载样式：

  {
    test: /\.styl$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'stylus-loader',
        options: {
          import: [
            resolve(__dirname, 'src/styles/global.styl')
          ]
        }
      }
    ],
    exclude: /node_modules/
  }

---

在webpack中，我是这样使用的：

module.exports = {
  ...,
  stylus: {
    import: [
      path.resolve(__dirname, './src/styles/globals.styl')
    ]
  }
}