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

Question

我不确定这是否可行，并且似乎无法在其中找到任何内容。我已经使用手写笔加载器设置了 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'
...

我想避免必须 @import 或 @require 每个将使用它的手写笔文件中的全局样式。

是否有任何 webpack 配置允许我这样做？

Answer 1

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')
    ]
  }
}

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

Webpack: Can you include a set of global styles used when compiling preprocessed styles with a loader?

stylus

webpack