css - 使用 Grunt 构建 Stylus 主题

Question

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

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

这可能吗？如何设置？

现在我已经将 stylus 编译到我的 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 可以将文件 themes/default.styl 复制到 variables.styl 并将 stylus 编译为 css 样式，而不是删除 variables.styl 并再次将 themes/pretty-theme.styl 复制到variables.styl 和 compile 等。

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',
  },
}