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

Question

使用@vue/cli3.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',
          }
        }
      }
    }
  }
};

我的构建结果在哪...

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 SSR指南中找到了应该是本垒打的解释 CSS管理,但它使用的webpack.optimize.CommonsChunkPlugin已经弃用了webpack.optimize.SplitChunksPlugin,抛出构建错误......

错误:webpack.optimize.CommonsChunkPlugin已被删除,请改用config.optimization.splitChunks.

Answer 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';还需要将您的导入语句和其他导入语句从块中取出style并将其放入scriptvue 组件的块中：

// 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,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}audio,embed,iframe,img,object,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}

vue 应用程序的 Git 存储库位于此处。sass 文件的导入位于HelloWorld.vue.