<p>Nous essayons de trouver la bonne façon de gérer les arbres CSS dans les composants de fichier unique de Vue lors de l'utilisation de Webpack. </p> <p>Dans package.json, j'ai : <code>"sideEffects" : ["*.css", "*.less", "*.vue" ]</code> semble empêcher correctement les composants Vue de se charger alors qu'ils ne le devraient pas. Cependant, chaque balise <code><style></code> sera chargée sur la page. </p> <p>Nous chargeons notre SFC à partir d'un package NPM, qui répertorie une série d'exportations, par exemple : </p> <pre class="brush:php;toolbar:false;">exporter le bla depuis 'blah.vue'; exporter blah2 depuis 'blah2.vue' ; exporter blah3 depuis 'blah3.vue';</pre> <p>Même si nous avons simplement <code>import { blah3 } from 'a-npm-package';</code> dans notre JavaScript, il inclura les styles des trois composants. Comme nous avons beaucoup de composants Vue, cela entraîne l'ajout de beaucoup de CSS inutilisés à la page. </p> <p>Comment pouvons-nous empêcher que cela se produise ? Il existe certainement des moyens plus efficaces et plus dynamiques de gérer les styles que de simplement les transférer tous dans la page, même si seulement 1/10 d'entre eux sont utilisés. </p> <p>Merci</p>

// webpack.config.js (production)
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: 'production',

  entry: path.resolve('src/index.js'),

  output: {
    filename: '[name].js',
    path: path.resolve('dist'),
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          // 将css提取到文件中
          MiniCssExtractPlugin.loader,
          // 处理你的应用程序中的`.css`文件的导入
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    // 将所有的css提取到一个单独的文件中
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
}