Конвертировать SCSS миксин в PostCss миксин - PullRequest
Новая
       45

Конвертировать SCSS миксин в PostCss миксин

0 голосов
/ 26 марта 2019

Я настраиваю Laravel Mix впервые и хочу использовать SCSS mixin. Это мой webpack.mix.js: 

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
const purgeCss = require('laravel-mix-purgecss');
const postCssImport = require('postcss-import');
const postCssMixins = require('postcss-mixins');

mix.postCss('./source/styles/styles.css', './public/assets/css/', [
  postCssImport(),
  postCssMixins({
    mixinsDir: path.join(__dirname, './source/styles/mixins')
  }),
  tailwindcss('./tailwind.config.js')
]);

mix.js('./source/scripts/app.js', './public/assets/js/app.js');

mix.copyDirectory('./source/fonts', './public/assets/fonts');

mix.copy('./source/images/', './public/assets/img/');

mix.copy('./source/root_files/', './public/');

mix.purgeCss({
  enabled: true,
  globs: [
    path.join(__dirname, './public/*.html'),
    path.join(__dirname, './public/assets/js/*.js'),
  ],
  extensions: ['html', 'js', 'php', 'twig'],
});

mix.browserSync({
  proxy: 'https://bobs.loc',
  files: [ './public/*.html', './public/assets/**/*.*' ]
});

Чтобы использовать мой миксин, я добавил строки: 

const postCssMixins = require('postcss-mixins');

и 

postCssMixins({
        mixinsDir: path.join(__dirname, './source/styles/mixins')
      }),

И поместите миксин в соответствующую папку. Когда я пытаюсь запустить сборку, я получаю следующую ошибку: 

CssSyntaxError: <css input>:5:7: Unknown word

Это рассматриваемый миксин, который находится в fluid.css в папке mixins: 

@define-mixin fluid($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
    }
  }

  @media (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

Я использую его для плавных размеров шрифта между указанными значениями ширины экрана.

Может кто-нибудь помочь мне заставить это работать?

...