web-dev-qa-db-ja.com

Vue.js CLI 3-CSS / Sassのベンダーバンドルを作成するにはどうすればよいですか？

@vue/cli 3.xを使用していて、私はvue.config.jsを少し変更しました。 app.cssやvendor.css（Sassから変換）などの個別のCSSファイルが必要です-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 includeallnode_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のために廃止されたwebpack.optimize.CommonsChunkPluginを使用します。 SplitChunksPlugin 、ビルドエラーをスローします...

エラー：webpack.optimize.CommonsChunkPluginが削除されました。代わりにconfig.optimization.splitChunksを使用してください。

javascriptnode.jsvue.jswebpack
10
scniro

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ブロックから引き出して、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 app here のGitリポジトリ。sassファイルのインポートはHelloWorld.vueにあります。

3
GenericUser

私はこのプラグインを一度使用したことがあり、それがあなたが達成したいことを行うと信じています： https://github.com/teamable-software/css-chunks-html-webpack-plugin

0
Maciej Kwas

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

ただし、これは 単一ファイルのコンポーネントでは機能しない可能性があります です。これを機能させるには、 vue-loader@next

0
sliptype