css - 组合多个 CSS 预处理器

Question

我们在生产中有数百个 .less 文件，但也想开始合并 .scss 文件。

我是否需要创建自己的文件类型以编译多种类型的 CSS 预处理器文件，或者是否已经有一种方法可以执行以下操作:

@import 'less-styles.less';
@import 'scss-styles.scss';
@import 'stylus-styles.styl'; //potentially

由此它会按该顺序生成单个 CSS 文件。

Answer 1

因为有效的 CSS 代码也是有效的 Less 代码，您可以先将 SCSS 和手写笔文件编译为 CSS 并导入它。

sass scss-styles.scss scss-styles.css

比起你的 Less 代码:

@import (less) scss-styles.css

上面的 less 关键字可以:

less: treat the file as a Less file, no matter what the file extension

以上意味着您可以在您的 Less 代码中扩展和混入 scss-styles.css 文件中的 CSS 选择器。

请注意，scss-styles.css 文件中的变量和混合在 Less 中不可(重新)使用。

如果您也需要变量和混入，唯一的解决方案似乎是 to convert your SCSS to Less .另请参阅:https://github.com/bassjobsen/grunt-scss2less

您应该能够对您的手写笔 (.styl) 文件执行相同的操作。