title: How use the mini-css-extract-plugin to combine imported css and css generated from scss in a single file?
body: <p>I'm using <code>Webpack 4</code> and the <code>mini-css-extract-plugin</code> in a php application. I keep all the <code>css</code> styles I've written in <code>scss</code> files but, in some cases, when I import an external library, I import its css in the script where I use it. My end goal would be to have all the css styles in a single css file that I can manually include in a php view, but at the moment I get the scss in a file and the css from libraries in another.</p>
  
  <p>My current webpack configuration is this:</p>
  
  <pre><code>module.exports = {
    devtool: 'source-map',
    entry: {
    style: './resources/assets/sass/style.scss',
    ...
  },
   optimization: {
     splitChunks: {
       cacheGroups: {
         default: false,
          styles: {
            name: 'styles',
            test: /\.s?css$/,
            minChunks: 1,
            reuseExistingChunk: true,
            enforce: true,
          },
          commons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
            //minChunks: 2,
          },
        },
      },
    },
    module: {
      rules: [
        { 
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
          ],
        },
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            MiniCssExtractPlugin.loader,
            'css-loader',
            {
              loader: 'postcss-loader',
              options: { config: { path: 'postcss.config.js' } },
            },
            'sass-loader',
          ],
        },
  plugins: [
  new MiniCssExtractPlugin({
        filename: '[name].[chunkhash].css',
      }), 
  new webpack.ProvidePlugin({
       noUiSlider: 'nouislider',
     }),
  ]
  </code></pre>
  
  <p>The <code>scss</code> styles work correctly, but then in one script I have this:</p>
  
  <pre><code>import 'nouislider/distribute/nouislider.css';
  </code></pre>
  
  <p>Which is from a script included with <code>ProvidePlugin</code> and this css ends up in <code>vendors.css</code> file, while I would like it to be in <code>style.css</code> together with the rest.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Edit:
  As suggested, I created a github repository recreating the issue:</p>
  
  <p><a href="https://github.com/carlotrimarchi/webpack-test" rel="nofollow noreferrer">https://github.com/carlotrimarchi/webpack-test</a></p>