我们如何使用Vue在Laravel中提取CSS块文件? [英] How do we extract CSS chunks file in Laravel with Vue?

问题描述

我正在使用Vue.js在Laravel中工作，并且在我的webpack.config.js文件中，我正在提取js块文件，如下所示:

I am working in Laravel with Vue.js and in my webpack.config.js file I am extracting the js chunks file like this:

mix.webpackConfig({
    resolve: {
        alias: {...
            'Helpers': path.resolve(__dirname, 'resources/js/helpers/'),
            'Themes': path.resolve(__dirname, 'resources/js/themes/')
        ...}
    },
    output: {
        chunkFilename: 'js/chunks/[name].js',
    },
});

这将提取js块文件，例如0.js，1.js，2.js等.我想以相同的方式提取CSS块.

This extract the js chunks file like 0.js , 1.js ,2.js etc. I want to extract the CSS chunks in same way.

推荐答案

我在vuely xd上遇到了同样的问题. 现在，我已经做到了:

I was having the same problem with vuely xd. For now what I have done this:

mix.autoload({
    'jquery': ['$', 'window.jQuery', 'jQuery'],
})

mix.webpackConfig({
    resolve: {
        alias: {
            'Api': path.resolve(__dirname, 'resources/js/api/'),
            'Components': path.resolve(__dirname, 'resources/js/components/'),
            'Constants': path.resolve(__dirname, 'resources/js/constants/'),
            'Container': path.resolve(__dirname, 'resources/js/container/'),
            'Views': path.resolve(__dirname, 'resources/js/views/'),
            'Helpers': path.resolve(__dirname, 'resources/js/helpers/'),
            'Themes': path.resolve(__dirname, 'resources/js/themes/')
        }
    },
    output: {
        chunkFilename: mix.inProduction() ? "js/chunks/[name].[chunkhash].js" : "js/chunks/[name].js",
    }
});


mix.options({
    extractVueStyles: true
});

mix.js('resources/js/main.js', 'public/js');
mix.sass('resources/js/assets/scss/_style.scss', 'public/css/style.css');

这篇关于我们如何使用Vue在Laravel中提取CSS块文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！