laravel 组合中的自动前缀

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'],
            })
        ]
    });

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

laravel 组合中的自动前缀

Autoprefixer in laravel mix

css

laravel

gulp

webpack

laravel-mix