Mini-css-extract-plugin: Can filenames support slashes (for directories)?

[benwiley4000]

Node 8.9.4 macOS High Sierra 10.13.3

Thanks for this project! It's been great so far.

As noted in the readme, the output options are meant to be similar to those for the main webpack config. However, one difference currently is that directory specifications are chopped off the front for the css plugin, while they're respected for JavaScript. It would be great if it were possible to specify a subdirectory under the main output path for CSS assets.

return {
    entry: {
      main: './src/index.js',
    },
    resolve: { extensions: ['.js', '.jsx'] },
    output: {
      path: __dirname + '/dist',
      filename: 'js/[name].js' // <-- JS files end up at ./dist/js/*.js
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin('css/[name].css') // <-- CSS in ./dist/*.css 😲
    ]
  };

P.S. While writing this up I realized it's possible to get what I want by doing:

plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/[name].css',
    path: __dirname + '/dist/css'
  }) // <-- CSS now in ./dist/css/*.css 
]

However I would argue the other behavior is still surprising. CSS assets automatically gets placed relative to the main output path if no special path is specified, but not before stripping off meaningful information.

[alexander-akait]

@benwiley4000 seems bug, PR welcome :+1:

[LeoniePhiline]

Why is 'css/' required in filename, when path is given, containing '/css'?
Shouldn't the correct configuration rather be like follows?

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].css',
    path: __dirname + '/dist/css'  // <-- CSS now in ./dist/css/*.css 
  })
]

I'd think with path: __dirname + '/dist/css' and filename: 'css/[name].css' the resulting filename should be '(dirname)/dist/css/css/(name).css', no?

Is it generally recommended to include paths in the filename option, while a separate path option exists?

[benwiley4000]

@LeoniePhiline I didn't actually notice I did that! You're right, you would think the path would be concated, but as noted, the filename option for this plugin seems to chop off paths. So it just takes whatever comes after the last / and sticks it after the path name.

As for:

Is it generally recommended to include paths in the filename option, while a separate path option exists?

I have no idea what the "recommendation" is. I agree it's somewhat odd to specify path segments in both path and filename, but in my case that's very convenient. It means I can specify a base output directory in my top level output.path config, and then specify output subdirectories in the filenames for different asset outputs.

[paulfalgout]

FWIW it seems like the path must also be a relative path.. using path.resolve(process.cwd(), './assets/css'); I had my build css inside my `my-js-path/User/path-to/assets/css'

[sokra]

There is not path option for the mini-css-extract-plugin.

Use filename.

Example:

output: {
  path: path.resolve("dist"),
  filename: "js/[name].js"
  publicPath: "/dist"
},
plugins: [
  new MiniCssPlugin({
    filename: "css/[name].js"
  })
]

But there is no reason to do that except for aesthetics.

[lukepolo]

This seems not to work, webpack emits :

    -   "/css//js/app.app.css",

new MiniCssExtractPlugin({
    filename: `${preprocessor.output.segments.path}`, // Path : css/app.css
}

My app entry point is js/app but don't want to follow that entry point for output.

[alexander-akait]

@lukepolo can you create minimum reproducible test repo and new issue?

[lukepolo]

Probably, ill see what I can do. Working on a plugin that wraps around webpack so ill have to generate a new test to mimic what is happening. Ill post back here when I get the chance.

[lukepolo]

Hmmm , yah seems to work just fine, sooo just my problem then !