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

我想用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();
    }

当我通过＆＃39; npm运行脚本时，运行watch＆＃39;我收到一个错误：

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 +以下插件之一：

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

谢谢，师德

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

0 个答案: