Question

Laravel mix没有编译autoprefix。 output.css与input.css相同 - webpack.mix.js

let mix = require('laravel-mix');
mix.styles('resources/css/input.css', 'public/css/output.css')
    .options({
        postCss: [
            require('autoprefixer')({
                browsers: ['last 40 versions'],
            })
        ]
    });

- input.css

.example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

- output.css

.example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

Laravel版本5.4
laravel-mix 1.0

如何启用autoprefixer？

Answer 1

我在mix.styles()函数上找不到任何文档。但是如果你只想通过postCss运行样式表，你可以这样做：

mix.postCss('resources/css/input.css', 'public/css/output.css', [
    require('autoprefixer')({
        browsers: ['last 40 versions'],
        grid: true
    })
])

将输出：

.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -webkit-linear-gradient(top, white, black);
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

laravel混合中的自动修复器

1 个答案: