Vue.js CLI 3 - 如何为 CSS/Sass 创建供应商包？

Posted 2023-02-22

【中文标题】Vue.js CLI 3 - 如何为 CSS/Sass 创建供应商包？

【英文标题】：Vue.js CLI 3 - how can I create a vendor bundle for CSS/Sass?

【发布时间】：2019-05-26 15:49:35

【问题描述】：

使用@vue/cli 3.x，我稍微修改了我的vue.config.js。我想要单独的 CSS 文件，例如 app.css 和 vendor.css（从 Sass 转译） - 类似于其配置为处理 javascript 的方式。我不确定如何设置正确的配置来实现这一点。我是否错误地加载了我的文件？完全没有标记？

// vue.config.js
module.exports = 
  // [...]
  configureWebpack: 
    optimization: 
      splitChunks: 
        cacheGroups: 
          shared: 
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            enforce: true,
            chunks: 'all',
          
        
      
    
  
;

我的 where 构建结果...

dist
├── css
|   └── app.css
├── js
|   ├── app.js
|   └── vendor.js

app.css 包括我通过node_modules 导入的所有。我的主要App.vue组件中的样式导入如下...

<style lang="scss">
  @import '../node_modules/minireset.css/minireset.sass';
</style>

// [...]

我想要的结果是以下结构，其中“供应商”CSS/Sass 被提取出来...

dist
├── css
|   ├── app.css
|   └── vendor.css
├── js
|   ├── app.js
|   └── vendor.js

---

我查看了MiniCssExtractPlugin，其中第一句话陈述了以下内容...

此插件将 CSS 提取到单独的文件中

但我没有找到在 Vue.js 生态系统中如何以惯用方式执行此操作的示例。我也尝试将以下内容添加到我的vue.config.js，但似乎没有任何效果......

module.exports = 
  // [...]
  css: 
    extract: 
      filename: 'css/[name].css',
      chunkFilename: 'css/[name].css',
    ,
  ,
;

---

我还在Vue s-s-r Guide | CSS Management 中找到了本应是本垒打的解释，但它使用了webpack.optimize.CommonsChunkPlugin，它已被webpack.optimize. SplitChunksPlugin 弃用，引发构建错误...

错误：webpack.optimize.CommonsChunkPlugin 已被删除，请 请改用 config.optimization.splitChunks。

【问题讨论】：

虽然这个问题得到了回答，但我在很大程度上认为当前的解决方案是一种解决方法。我已经针对该项目提出了一个问题，希望将来会引起一些关注github.com/vuejs/vue-cli/issues/3252

【参考方案1】：

vue.config.js 还允许您使用chainWebpack 方法。它可能更可取，因为它允许您修改 vue-cli 配置。使用 configureWebpack 会完全覆盖默认配置，这可能是让您的配置与 Sass 一起使用的问题的一部分。

此配置仅适用于纯 CSS，但与您所拥有的非常相似。

刚刚尝试将一些 Sass 嵌入到一些样式块中，它将供应商 css 与应用 css 分开。

module.exports = 
    chainWebpack(config) 
        config
            .output.chunkFilename('[name].bundle.js').end()
            .optimization.splitChunks(
                cacheGroups: 
                    vendorStyles: 
                        name: 'vendor',
                        test(module) 
                            return (
                                /node_modules/.test(module.context) &&
                                // do not externalize if the request is a CSS file
                                !/\.css$/.test(module.request)
                            );
                        ,
                        chunks: 'all',
                        enforce: true
                    
                
            );
    
;

更新

还需要将你的@import '../node_modules/minireset.css/minireset.sass';和其他import语句从style块中取出，放到你vue组件的script块中：

// your component file
<script>
    import "minireset.css/minireset.sass";
    // rest of script
</script>

该文件仍将被导入并在下面的样式块中使用。

我的导出文件包括一个 vendor.[hash].css 和一个 app.[hash].css 文件。应用程序文件包含样式块的内容。由于我让我的测试应用程序简单且适合您的用例，因此供应商文件仅包含来自 minireset 的样式信息：

// vendor.[hash].css
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ulmargin:0;padding:0h1,h2,h3,h4,h5,h6font-size:100%;font-weight:400ullist-style:nonebutton,input,select,textareamargin:0htmlbox-sizing:border-box*,:after,:beforebox-sizing:inheritaudio,embed,iframe,img,object,videoheight:auto;max-width:100%iframeborder:0tableborder-collapse:collapse;border-spacing:0td,thpadding:0;text-align:left

vue app here 的 Git repo。 sass文件的导入在HelloWorld.vue。

【讨论】：

感谢您的建议。不幸的是，我仍然得到一个包含所有内容的 CSS 文件。您是否遗漏了其他重要的细节？如果您能创建一个最小的 github 存储库，我将永远感激不尽。

添加了更新。我忽略了我的导入语句发生在我的脚本块而不是样式块中。

老兄，不错！是的，这确实有效。不过，出于一个原因，我目前不是该解决方法的完全粉丝。因此，通过这个简单的示例，我可以导入 minreset 并将其分块到 vendor.css 文件中。但是，我需要在导入之前设置一个 sass 变量，这会影响我对路径的进一步导入。我知道这超出了这个问题的范围，我仍然可能会接受你的回答，这只是我唯一的挂断电话。否则，这运作良好。我仍然渴望能够在<style> 块中做到这一点。在这一点上，也许这是一厢情愿的想法！

我尝试将导入脚本保留在样式块中，但它经常适得其反。可能有一种方法可以配置如何/何时从样式块将 scss 转换为 css，但我还没有看到这样做的方法。

是的，样式导入的处理方式有些问题。这对我有用，我最终弄清楚了可变因素。我仍然认为这是一种解决方法，但希望这在未来变得微不足道。也许当@next 普遍可用时，情况会有所不同。再次感谢！

【参考方案2】：

您可以将 MiniCssExtractPlugin 添加到您的 webpack 配置中（根据 the docs）：

// vue.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = 
  // [...]
  configureWebpack: 
    plugins: [
      new MiniCssExtractPlugin(
        filename: '[name].css'
      )
    ],
    optimization: 
      splitChunks: 
        cacheGroups: 
          shared: 
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            enforce: true,
            chunks: 'all',
          
        
      
    
  
;

但是，这个may not work with single file components。为了使它正常工作，您可能必须使用vue-loader@next

【讨论】：

添加插件不会使其处于活动状态。您需要将其添加为通过某些测试后激活的加载程序，例如/\.css$/。

感谢您的建议。我也试过这个，我确实吐出了两个文件，但它们与所有应用程序和供应商样式重复。我查看了next 分支，但它已经闲置了将近一年 - 不确定我对此有何感受

【参考方案3】：

这个插件我用过一次，我相信它可以达到你想要的效果：https://github.com/teamable-software/css-chunks-html-webpack-plugin