Question

我不确定这是否可行，似乎无法找到任何内容。我已经使用手写笔加载器进行webpack设置，允许直接在js模块中导入.styl文件。

我面临的问题是预处理器上下文以单个.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：在使用加载器编译预处理样式时，是否可以包含一组全局样式？

1 个答案: