Question

使用@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',
          }
        }
      }
    }
  }
};

我的构建结果在...

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 Guide | CSS Management中找到了本垒打的解释，但是它使用了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和其他import语句，并将其放入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,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应用here的Git回购。 sass文件的导入位于HelloWorld.vue中。

Answer 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

Answer 3

我曾经使用过该插件，并且相信它可以实现您想要实现的目标：https://github.com/teamable-software/css-chunks-html-webpack-plugin

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

3 个答案: