Question

我是第一次设置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/**/*.*' ]
});

要使用我的mixin，我添加了以下行：

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

和

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

并将mixin放在适当的文件夹中。当我尝试运行构建时，出现以下错误：

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;
}

我将它用于指定屏幕宽度之间的可变字体大小。

任何人都可以帮助我使它正常工作吗？

将SCSS mixin转换为PostCss mixin

0 个答案: