laravel mix 中的自动前缀

Question

Laravel mix 不编译自动前缀。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'],
            })
        ]
    });

- 输入.css

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

- 输出.css

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

• Laravel 5.4 版本
• Laravel 混合 1.0

如何启用自动前缀？

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