3

私は Webpack 4 セットアップを使用しています。ここでは、.vue ファイルからのスコープ css を含め、すべての css を 1 つのバンドルにまとめようとしています。MiniCssExtractPlugin を使用してファイルから CSS を抽出し、SplitChunksPlugin を使用してすべての CSS を 1 つのファイルにバンドルしています。問題は、.vue ファイルからのスコープ css が別の css ファイルに入れられていることです。

私のwebpack構成:

optimization: {
splitChunks: {
  cacheGroups: {
    common: {
      test: /[\\/]node_modules[\\/].*\.js$/,
      name: 'common',
      chunks: 'all'
    },
    styles: {
      test: /\.css$/,
      filename: '[name]-[contenthash].css',
      chunks: 'all',
      enforce: true
    }
  }
 }
},
module: {
  rules: [
    {
      enforce: 'pre',
      test: /\.(js|vue)$/,
      exclude: /node_modules/,
      use: 'eslint-loader'
    },
    {
      test: /\.vue$/,
      use: 'vue-loader'
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    },
    {
      test: /\.(sa|sc|c)ss$/,
      exclude: /node_modules/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            importLoaders: 3,
            sourceMap: true
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: true
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
            indentedSyntax: true
          }
        }
      ]
    }
  ]
},
plugins: [
  new VueLoaderPlugin(),
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css'
  }),
  new PurifyCSSPlugin({
    paths: glob.sync([
      path.join(__dirname, 'templates/**/*.html'),
      path.join(__dirname, 'assets/js/**/*.js'),
      path.join(__dirname, 'assets/js/**/*.vue')
    ]),
    purifyOptions: {
      info: true,
      minify: true,
      rejected: true
    }
  })
],
resolve: {
  alias: {
    jquery: 'jquery/src/jquery',
    'vue': 'vue/dist/vue.js'
  },
  extensions: ['.js', '.vue', '.json', '.sass']
}

出力:

scoped-css-from-a-vue-file.03371a6565c9f56951dd.css // (172 bytes)
main-css-bundle-from-sass-files.af5152091d41a56d9bdd.css // (303 KiB)
4

0 に答える 0