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

使用

@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\u模块导入的所有。在我的主
App.vue
组件中，我的样式导入如下所示

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

// [...]


我已经研究了第一句话中陈述以下内容的地方

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

但是我没有发现在Vue.js生态系统中如何惯用的例子。我还尝试将以下内容添加到我的
vue.config.js
，但似乎没有任何效果

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


我也在中找到了本应该是一个主运行的解释，但它使用了
webpack.optimize.commonchunkplugin
，这已经被弃用，并引发了一个构建错误

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

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/miniset.css/miniset.sass'和其他导入语句从
样式
块中取出，并将其放入vue组件的
脚本
块中：

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

vue应用程序的Git回购。sass文件的导入位于
HelloWorld.vue
中。您可以将
minicsExtractPlugin
添加到您的网页包配置中（根据）：

然而，这是一个错误。为了让它正常工作，你可能需要使用这个插件。
我曾经使用过这个插件，我相信它能达到你想要的效果：
添加插件并不能激活它。您需要将其添加为一个加载程序，在它通过一些测试后激活，如
/\.css$/
。谢谢您的建议。我也尝试过这个，我确实吐出了两个文件，但它们与所有应用程序和供应商样式都是重复的。我已经查看了
下一个
分支，但它已经停用了将近一年-不确定我对此有何感想谢谢你的建议。不幸的是，我仍然得到一个包含所有内容的CSS文件。你有没有遗漏其他重要的细节？如果你能制定一个最低限度的github回购协议，我将永远感激。添加了一个更新。我忽略了我的导入语句发生在脚本块而不是样式块中。哥们，太好了！是的，这确实有效。尽管如此，我目前并不完全喜欢这种变通方法，原因有一个。通过这个简单的例子，我可以导入
minreset
并将其分块到
vendor.css
文件中。但是，我需要在导入之前设置一个sass变量，这会影响关于路径的进一步导入。我知道这超出了这个问题的范围，我仍然可能会接受你的答案，这只是我唯一的障碍。否则，这是工作得很好。我仍然渴望能够在
块中完成它。也许这是一厢情愿的想法！我试着将导入脚本保留在样式块中，结果总是适得其反。可能有一种方法可以配置如何/何时从样式块将SCS转换为
css
，但我还没有看到一种方法。是的，样式导入的处理方式有问题。这对我来说很有效，我找到了我这边的变量。我仍然认为这是可行的，但希望这在将来变得微不足道。也许当
@next
普遍可用时，情况会有所不同。再次感谢！虽然这个问题得到了回答，但我大体上认为当前的解决办法是可行的。我已经提出了一个反对该项目的问题，希望将来能得到一些关注
// your component file
<script>
    import "minireset.css/minireset.sass";
    // rest of script
</script>

// 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.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',
          }
        }
      }
    }
  }
};