web-dev-qa-db-fra.com

Vue.js CLI 3 - comment créer un ensemble de fournisseurs pour CSS/Sass?

Avec @vue/cli 3.x et j’ai légèrement modifié mon vue.config.js. Je veux avoir des fichiers CSS séparés tels que app.css et vendor.css (transpiled from Sass) - de la même manière que sa configuration pour traiter le JavaScript. Je ne sais pas comment définir la configuration appropriée pour y parvenir. Est-ce que je charge mes fichiers de manière incorrecte? Manquer la marque entièrement?

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

Ma construction où résulte dans ...

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

app.css inclut all, j'ai importé via mon node_modules. Mon style d'importation est le suivant dans mon composant App.vue principal ...

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

// [...]

Le résultat souhaité est la structure suivante, où le CSS/Sass "fournisseur" est extrait ...

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

J'ai examiné le MiniCssExtractPlugin où les premières phrases disent ce qui suit ...

Ce plugin extrait CSS dans des fichiers séparés

Mais je n'ai trouvé aucun exemple montrant comment le faire de manière idiomatique dans l'écosystème de Vue.js. J'ai également essayé d'ajouter ce qui suit à mon vue.config.js, mais rien ne semble prendre effet ...

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

J'ai aussi trouvé ce qui aurait dû être une explication pour la maison dans le Vue SSR Guide | Gestion CSS , mais il utilise webpack.optimize.CommonsChunkPlugin qui est obsolète en faveur de webpack.optimize. SplitChunksPlugin , générant une erreur de construction ...

Erreur: webpack.optimize.CommonsChunkPlugin a été supprimé, s'il vous plaît utilisez plutôt config.optimization.splitChunks.

javascriptnode.jsvue.jswebpack
8
scniro

Le vue.config.js vous permet également d'utiliser une méthode chainWebpack. Cela peut être préférable car cela vous permet de modifier la config de vue-cli. L'utilisation de configureWebpack écrase entièrement la configuration par défaut, ce qui pourrait faire partie du problème lié à la compatibilité de votre système avec Sass.

Cette configuration concerne uniquement les CSS, mais est assez similaire à ce que vous avez.

Je viens d’essayer cela avec des Sass intégrés dans des blocs de style, et cela casse le fichier CSS du fournisseur à partir du fichier css de l’application.

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

Mettre à jour

Il est également nécessaire d'extraire votre @import '../node_modules/minireset.css/minireset.sass'; et d'autres instructions d'importation du bloc style et de les placer dans le bloc script de votre composant vue:

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

Le fichier sera toujours importé et utilisé dans votre bloc de style ci-dessous.

Mes exportations incluent un fournisseur. [Hash] .css et un fichier app. [Hash] .css. Le fichier d'application contient le contenu des blocs de style. Depuis que mon application de test est restée simple et conforme à votre cas d'utilisation, le fichier du fournisseur ne contient que les informations de style du 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 de vue app ici . L'importation du fichier sass est dans HelloWorld.vue.

2
GenericUser

J'ai utilisé une fois ce plugin et je crois qu'il fait ce que vous voulez réaliser: https://github.com/teamable-software/css-chunks-html-webpack-plugin

0
Maciej Kwas

Vous pouvez ajouter la MiniCssExtractPlugin à votre configuration Webpack (par la documentation ):

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

Cependant, ceci peut ne pas fonctionner avec des composants de fichier uniques . Pour que cela fonctionne, vous devrez peut-être utiliser vue-loader@next

0
sliptype