使用SASS和PostCSS关键CSS分割设置Laravel Mix

时间:2018-02-07 13:04:36

标签: sass postcss laravel-mix critical-css

我想用mix.sass和PostCss Critical CSS拆分设置Laravel Mix。最后我想要两个文件:app.css和app-critical.css。

不幸的是,我可以让它发挥作用。其中一个设置(webpack.mix.js)我尝试过:

    mix
        .js('templates/src/js/app.js', 'web/assets/dist/')
        .js('templates/src/js/home.js', 'web/assets/dist/')
        .extract(['vue','axios','lazysizes','svgxuse', 'fontfaceobserver'], 'web/assets/dist/vendor.js')
        .sass('templates/src/scss/app.scss', 'web/assets/dist/')
        .sourceMaps()
        .options({
            postCss: [
                require('postcss-critical-css')({
                    preserve: false,
                    minify: false
                })
            ]
        })
        .browserSync({
            proxy: '127.0.0.1:8080',
            files: [
            'templates/**/*.twig',
            'templates/src/js/**/*',
            'templates/src/scss/**/*'
        ]
    });

    if (mix.inProduction()) {
        console.log("In production");
        mix.version();
    }

当我通过' npm运行脚本时,运行watch'我收到一个错误:

10% building modules 0/1 modules 1 active ...ign-tools/templates/src/scss/app.scssWithout `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.

另外,我的文件只是复制所有关键样式。文件越来越大,每次输入SCSS / CSS文件更改时都会扩展重复的代码。

我确实尝试设置Laravel Mix + mix.sass +以下插件之一:

没有成功:( 有工作设置或链接到示例存储库的任何人吗?

谢谢, 师德

0 个答案:

没有答案