用webpack全局导入手写笔文件

Question

我已经用vue2和“vue init webpack my-project”启动了一个新项目我正在使用手写笔进行样式化。到目前为止一切都那么好，它汇集了一切。

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

这意味着我不想在我的应用程序中的每个.styl文件中使用“@import（'variables.styl'）”。我一直在寻找2个小时，但找不到任何好的东西。

为了这篇帖子的长度，我不会在这里复制粘贴webpack文件的内容。但是会为您提供以下链接：click 它是我项目中包含webpack文件的“build”目录

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

Answer 1

这适用于使用vue-cli＆lt;创建的vue应用程序3

根据stylus-loader，您可以通过variables.styl选项将import文件路径传递给手写笔加载器来实现此目的，建议您创建新文件夹styles在src目录中包含所有全局手写笔文件（变量，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']})