时间戳

首页 > 解决方案 > 使用带有 mixins 的 postcss 条件

css - 使用带有 mixins 的 postcss 条件

问题描述

我在将我的 postcss 条件转换为 css 时遇到问题。我正在使用 gulp 处理文件并输出一个 css 文件。一切似乎都在工作，直到我尝试转换条件（见下文）。

这是我的 gulp 文件：

const postcss = require('gulp-postcss');
const gulp = require('gulp');
const rename = require('gulp-rename');

gulp.task('generate-css', function () {
  var plugins = [
    require('postcss-import'),
    require('postcss-mixins'),
    require('postcss-nested'),
    require('postcss-simple-vars'),
    require('postcss-calc'),
    require('postcss-conditionals'),
    // require('cssnano'), -> commented out so that I can see what is being converted correctly
  ];
  return gulp
    .src('./src/pages/test/*.css')
    .pipe(postcss(plugins))
    .pipe(
      rename(function (path) {
        path.dirname = './src/pages/' + path.dirname;
        path.basename = 'testingStyles.module';
        path.extname = '.css';
      }),
    )
    .pipe(gulp.dest('.'));
});

这是我的 postcss 文件的简化版本：

@import '../../theme/_mixins.css';
@import '../../theme/_variables.css';

.myClass {
  @mixin mixinOne;
  @mixin mixinTwo bottom, 10;

  &__icon {
    @mixin SVG logo_url, $my-color;
  }
}

我遇到的（我认为）问题是在postcss-conditionals尝试删除@if语句之前未处理 mixins（已导入）。

这给了我这个错误：

postcss-conditionals: .../_mixins.css:4:3: Failed to parse expression
  3 | @define-mixin mixinOne $paramOne, $paramTwo {
> 4 |   @if $direction == all {
    |   ^
  5 |     margin: calc($spacer * $(factor));
  6 |   }

如果我删除postcss-conditionals插件，我会得到一个 css 文件，其中列表中的所有先前插件都已成功应用（没有嵌套、正确替换 var、转换了 calcs 等）。@define-mixins如果我删除postcss-conditionals插件，输出 css 文件中没有。

对于如何确保@define-mixins在尝试删除条件之前处理它们（插件的顺序对我来说似乎是正确的），我有点茫然。

如果有人对我做错了什么有所了解，将不胜感激！

标签： cssgulppostcsscss-modules

解决方案

也许有一些方法可以分两遍处理插件？例如首先['postcss-import', 'postcss-mixins']，然后是其余的？那至少（反）证明你的理论

推荐阅读