webentwicklung-frage-antwort-db.com.de

Vue.js CLI 3 - Wie kann ich ein Herstellerpaket für CSS/Sass erstellen?

Mit @vue/cli 3.x habe ich meinen vue.config.js etwas geändert. Ich möchte separate CSS-Dateien wie app.css und vendor.css (von Sass transpiled) haben - ähnlich wie es für die Verwendung von JavaScript konfiguriert ist. Ich bin nicht sicher, wie Sie die richtige Konfiguration einstellen, um dies zu erreichen. Lade ich meine Dateien falsch? Fehlt das Mal ganz?

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

Mein wo bauen führt in ...

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

app.css enthält all, das ich durch meinen node_modules importiert habe. Mein Stil importiert sich wie folgt in meiner Hauptkomponente App.vue ...

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

// [...]

Mein gewünschtes Ergebnis ist die folgende Struktur, bei der der "Hersteller" CSS/Sass extrahiert wird ...

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

Ich habe mir das MiniCssExtractPlugin angeschaut, in dem die ersten Sätze folgendes angeben ...

Dieses Plugin extrahiert CSS in separate Dateien

Ich habe jedoch keine Beispiele dafür gefunden, wie dies idiomatisch im Ökosystem Vue.js möglich ist. Ich habe auch versucht, meinem vue.config.js Folgendes hinzuzufügen, aber es scheint nichts zu wirken ...

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

Ich habe auch herausgefunden, was eine Home Run-Erklärung im Vue SSR Guide | gewesen sein sollte CSS Management , aber es verwendet webpack.optimize.CommonsChunkPlugin, der zugunsten von webpack.optimize nicht mehr empfohlen wird. SplitChunksPlugin , Fehler beim Erstellen ...

Fehler: webpack.optimize.CommonsChunkPlugin wurde entfernt, bitte Verwenden Sie stattdessen config.optimization.splitChunks.

8
scniro

Mit vue.config.js können Sie auch eine chainWebpack-Methode verwenden. Dies ist möglicherweise vorzuziehen, da Sie damit die vue-cli-Konfiguration ändern können. Bei Verwendung von configureWebpack wird die Standardkonfiguration vollständig überschrieben. Dies kann ein Teil des Problems sein, wenn Ihre Sass-Komponente verwendet werden soll.

Diese Konfiguration ist nur für reines CSS gedacht, ähnelt jedoch ziemlich dem, was Sie haben.

Ich habe es nur mit einigen Sass-Modellen ausprobiert, die in einigen Style-Blöcken eingebettet waren, und bricht die Hersteller-CSS von der App-CSS ab.

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
                    }
                }
            });
    }
};

Update

Es ist auch notwendig, Ihren @import '../node_modules/minireset.css/minireset.sass'; und andere Importanweisungen aus dem style-Block herauszuziehen und in den script-Block Ihrer Vue-Komponente zu legen:

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

Die Datei wird weiterhin importiert und in Ihrem Stilblock verwendet.

Meine Exporte enthalten eine Hersteller- [Hash] .css- und eine App. [Hash] .css-Datei. Die App-Datei enthält den Inhalt der Stilblöcke. Da ich meine Test-App einfach gehalten habe, enthält die Herstellerdatei nur die Style-Informationen von 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}

Git Repo von vue App hier . Der Import der Sass-Datei erfolgt in HelloWorld.vue.

2
GenericUser

Ich habe dieses Plugin einmal verwendet und ich glaube, es tut, was Sie erreichen wollen: https://github.com/teamable-software/css-chunks-html-webpack-plugin

0
Maciej Kwas

Sie können die MiniCssExtractPlugin zu Ihrer Webpack-Konfiguration hinzufügen (per 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',
          }
        }
      }
    }
  }
};

Dieses funktioniert jedoch möglicherweise nicht mit einzelnen Dateikomponenten . Damit dies funktioniert, müssen Sie möglicherweise [email protected] verwenden.

0
sliptype