使用 Grunt 构建 Stylus 主题

Question

我想让我的手写笔文件接受来自 grunt 的变量输入，循环变量值，并输出不同的主题 css 文件。

然后我可以像这样轻松切换主题。 https://stackoverflow.com/a/7847009/55124

这可能吗？如何设置它？

现在我已经咕噜咕噜地将手写笔编译到我的 css 中。但是，要生成不同的主题，我必须在 mainCSS.stylus 文件中手动更改我的 themeName 变量的值并使用 grunt 重建。

Answer 1

你怎么看这种方式：

有一个 main.styl，其中包含：

@import "variables"; 
//some other styles and imports

还有一些主题文件：

 themes/default.styl
 themes/pretty-theme.styl
 themes/very-pretty-theme.styl

使用 grunt-contrib-copy 您可以将文件主题/default.styl 复制到 variables.styl 并将 stylus 编译为 css 样式，而不是删除 variables.styl 并再次将主题/pretty-theme.styl 复制到variables.styl 和编译等等。

copy: {
  default-theme: {
    src: 'themes/default.styl',
    dest: 'variables.styl',
  },
  pretty-theme: {
    src: 'themes/pretty-theme.styl',
    dest: 'variables.styl',
  },
  very-theme: {
    src: 'themes/very-pretty-theme',
    dest: 'variables.styl',
  },
}