Add option to retain a require('./file.css') call in the JS source

[eemeli]

I'm developing an internal React component library for a client. The styles for the components are in SCSS, and I'm using this plugin to extract each component's styles into separate CSS files, so they don't need to be re-compiled from SCSS on each application build.

As these components will be used in a situation where they'll be re-packaged as a web app using something like Webpack or Rollup, I would like to have a require('./file.css') import retained in the Webpack-compiled JS, such that the eventual re-packaging of the app using the library components can define for itself the packaging for its styles. As is, I may need to instruct users to include two separate imports to use the components, which seems a bit clumsy:

import { ComponentA, ComponentB } from '@scope/library'
import '@scope/library/styles/ComponentA.css'
import '@scope/library/styles/ComponentB.css'

The particular Webpack config setting that I would wish to trigger behaviour like this is output.libraryTarget: 'commonjs'.

[michael-ciniawsky]

This needs to be handled by webpack itself (if possible), please open an issue in webpack/webpack instead. As the name suggests the mini-css-extract-plugin is responsible for extracting the CSS (for production usage on the web). It might be in general better to use a simple CLI for transpiling the (S)CSS on the package/library level instead. Consumers can use the package's CSS in the following way later on

library/package.json

{
   name: 'my-library',
   // also works for non-webpack build tools, e.g via `postcss-import` 
+  style: 'dist/component.css',
}

webpack.config.js (requires webpack >= v4.0.0)

const config = {
   module: {
     rules: [
        {
           test: /\.css$/,
           use: [ ...loaders ],
+          resolve: {
+            mainFields: [ 'style' ]
+          }
        }
     ]
   }
}

app.css

@import 'my-library';

app.js

import './app.css'

Or in the way you already mentioned (subimports), to not rely on webpack specifics within a package