Vue + vue-loader 15 + webpack 4 + mini-css-e-p creates multiple css files

[amir20]

I am losing my mind. I have googled for hours and don't know what else to try. I am moving from EWP to this module and I can't get to produce one css file. I have also updated to latest vue-loader.

Webpack Confg

const ManifestPlugin = require("webpack-manifest-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  context: __dirname + "/assets",
  entry: {
    "details-page": "./js/details-page.js",
    index: "./js/index.js",
    common: "./js/common.js",
    styles: "./css/styles.css"
  },
  optimization: {
    concatenateModules: true,
    // runtimeChunk: true,
    minimizer: [
      new OptimizeCssAssetsPlugin({
        cssProcessorOptions: {
          safe: true
        }
      })
    ],
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all"
        },
        "styles-compiled": {
          name: "styles-compiled",
          test: /\.css$/,
          chunks: "all",
          enforce: true
        }
      }
    }
  },
  output: {
    path: __dirname + "/clashleaders/static/",
    filename: "js/[name].js"
  },
  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      vue$: "vue/dist/vue.esm.js"
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /.*flags.*\.(svg)$/,
        loader: "file-loader",
        options: {
          name: "[name]-[hash].[ext]",
          outputPath: "flags/",
          publicPath: "/static/flags/"
        }
      },
      {
        test: /\.svg$/,
        exclude: [/flags/],
        use: {
          loader: "svg-url-loader"
        }
      },
      {
        test: /\.(sass|scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            query: {
              importLoaders: 1
            }
          },
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: loader => [
                require("postcss-import")(),
                require("postcss-cssnext")({
                  features: {
                    customProperties: { warnings: false }
                  }
                }),
                require("postcss-font-magician")()
              ]
            }
          },
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new ManifestPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css'
    }),
    new CleanWebpackPlugin([
      __dirname + "/clashleaders/static/css",
      __dirname + "/clashleaders/static/js",
      __dirname + "/clashleaders/static/flags"
    ]),
    new VueLoaderPlugin()
  ]
};

if (process.env.NODE_ENV === "production") {
  module.exports.devtool = "#source-map";
  module.exports.output.filename = "js/[name].[chunkhash].js";
}

Version
mini-css-extract-plugin@0.4.0
vue-loader@15.0.4

Bug
NODE_ENV='production' webpack --progress --mode production
Produces this...

When I do ag --css "player-comparison" which is a class that I know is in one of the vue files I get

Does this make sense? Wouldn't it make sense to get all css files in the combined css. My config and package files.

[alexander-akait]

@amir20 very interesting, can you create minimum reproducible test repo?

[amir20]

@evilebottnawi I was able to reproduce this by creating a really simple Vue application. Here is the repo: https://github.com/amir20/vue-mini-css.

There are three entry points. One CSS file and two other javascript files.

app/
├── css
│   └── styles.css
└── js
    ├── components
    │   ├── comp1.vue
    │   └── comp2.vue
    ├── entry1.js
    └── entry2.js

After doing npm run build, it should create styles-compiled.css with all css in one place. However, it does not do that.

I have done some research since then and I am pretty sure the fix requires fixing the test in cacheGroup to something else from test: /\.css$/,. I don't believe that captures vue styles.

[alexander-akait]

@amir20 how about this https://github.com/thecrypticace/webpack-css-chunks-test/blob/master/webpack.config.js#L61, looks some people extract css from vue doing this setup

[amir20]

I saw that as well. My goal was to create one css file. That creates two. I imagine I could put the two rules together, but does it make sense to go through all these configurations to do this? I imagine having a bunch of vue files with css is a common pattern that many people plan to do.

[amir20]

Hmmmmm. I can't get that to work either...

diff --git a/webpack.config.js b/webpack.config.js
index ef5453d..7c75bce 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,11 +17,29 @@ module.exports = {
           name: "vendors",
           chunks: "all"
         },
-        "styles-compiled": {
-          name: "styles-compiled",
-          test: /\.css$/,
+        extractVueStyles: {
+          test: m => {
+            return /\.vue\?vue&type=style/.test(m.identifier());
+          },
+          name: "vue-styles",
           chunks: "all",
-          enforce: true
+
+          // enforce: false
+          // results in no vue-styles chunk
+          // Only a bundle.css file
+          enforce: false
+        },
+        extractOtherStyles: {
+          test: m => {
+            return m.constructor.name == "CssModule";
+          },
+
+          // enforce: false
+          // results in no other-styles chunk
+          // Only a bundle.css file
+          name: "other-styles",
+          chunks: "all",
+          enforce: false
         }
       }
     }

Am I doing something wrong? :( That produces no files now.

[amir20]

Doing enforce: true gets me closer to having everything in other-styles.css. I have to go to work now but I'll check back soon.

[nass600]

Exact same problem here. My configuration differs in using MiniCssExtractPlugin.loader in the vue rules:

{
    test: /\.vue$/,
    loader: [
        {
            loader: 'vue-loader',
            options: {
                loaders: {
                    scss: [
                        'vue-style-loader',
                        MiniCssExtractPlugin.loader,
                        'css-loader?sourceMap',
                        'sass-loader?sourceMap'
                    ],
                    css: [
                        'vue-style-loader',
                        MiniCssExtractPlugin.loader,
                        'css-loader?sourceMap'
                    ]
                }
            }
        },
        {
            loader: 'eslint-loader',
            options: eslintOptions
        }
    ]
},
{
    test: /\.(css|scss)$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader?sourceMap',
        'sass-loader?sourceMap'
    ]
}

Still can get to merge all my the generated css in one file.

[amir20]

I am still not sure how to do this. I am waiting for vue-cli to integrate with vue-loader v15 and how they plan to do it.

[nass600]

@sokra Anything we are oversighting in order to make this work that you know about?

[eugenioclrc]

same issue here

[jiubao]

same issue

[alexander-akait]

Please don't write same issue, it is clogs thread, just add 👍 on top post, thanks!

[nass600]

I think I sorted it out finally, at least is working for me:

optimization: {
    splitChunks: {
        cacheGroups: {
            default: false,
            common: false,
            styles: {
                name: 'app',
                test: /\.(s?css|vue)$/, // chunks plugin has to be aware of all kind of files able to output css in order to put them together
                chunks: 'initial',
                minChunks: 1,
                enforce: true
            }
        }
    }
}

[alexander-akait]

/cc @amir20 looks on #113 (comment) solution, it is works for you?

[amir20]

I’ll give it a try today.

…

Sent from my iPad

On May 8, 2018, at 2:28 AM, Evilebot Tnawi ***@***.***> wrote: /cc @amir20 looks on #113 (comment) solution, it is works for you? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.