我们如何使用 Vue 在 Laravel 中提取 CSS 块文件？

Posted 2023-02-22

【中文标题】我们如何使用 Vue 在 Laravel 中提取 CSS 块文件？

【英文标题】：How do we extract CSS chunks file in Laravel with Vue?

【发布时间】：2019-06-11 14:06:15

【问题描述】：

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

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 块。

【参考方案1】：

我在使用 vuely xd 时遇到了同样的问题。 现在我做了什么：

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