<p dir="auto">Does anyone know why this isn't working?</p>
<p dir="auto">I'd like Webpack to load one directory of<code class="notranslate">.scss</code> files with <code class="notranslate">sass-loader</code>, and the rest to use <code class="notranslate">postcss-loader</code>. I figured I could just have two sections in my Webpack config that would test for <code class="notranslate">/\.scss$/</code>, using <code class="notranslate">exclude: [...bootstrap folder...]</code> in the one that uses postcss and <code class="notranslate">include: [...bootstrap folder...]</code> in the one that uses Bootstrap. But webpack seems to completely ignore my second definition.</p>
<p dir="auto">The motivation for this is I've found that the PostCSS Sass loader isn't able to load Bootstrap v4, due to circular dependencies in its mixins (see my <a href="https://github.com/jonathantneal/precss/issues/49#issuecomment-170016133" data-hovercard-type="issue" data-hovercard-url="/csstools/precss/issues/49/hovercard">issue</a> on their project and numerous conversations with that group on Gitter.im). So I'm trying to isolate the Bootstrap <code class="notranslate">.scss</code> files to load with the Sass loader, which can do this. Webpack doc seems to suggest it's supported.</p>
<p dir="auto">Here are my Scss loader sections:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  test: /\.scss$/,
    exclude: [
    path.resolve(__dirname, '../node_modules/bootstrap/scss'),
    path.resolve(__dirname, '../node_modules/bootstrap/scss/mixins'),
    ],
  loaders: [
    'isomorphic-style-loader',
    'css-loader?' + (DEBUG ? 'sourceMap&amp;' : 'minimize&amp;') +
    'modules&amp;localIdentName=[name]_[local]_[hash:base64:3]',
    'postcss-loader?parser=postcss-scss&amp;pack=compile',
    'postcss-loader?pack=import',
  ],
}, {
  test: /\.scss$/,
  include: [
    path.resolve(__dirname, '../node_modules/bootstrap/scss'),
    path.resolve(__dirname, '../node_modules/bootstrap/scss/mixins'),
  ],
  loaders: [
    'isomorphic-style-loader',
    'css-loader?' + (DEBUG ? 'sourceMap&amp;' : 'minimize&amp;') +
    'modules&amp;localIdentName=[name]_[local]_[hash:base64:3]',
    'sass-loader',
  ],
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>scss<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
    <span class="pl-c1">exclude</span>: <span class="pl-kos">[</span>
    <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'../node_modules/bootstrap/scss'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'../node_modules/bootstrap/scss/mixins'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">loaders</span>: <span class="pl-kos">[</span>
    <span class="pl-s">'isomorphic-style-loader'</span><span class="pl-kos">,</span>
    <span class="pl-s">'css-loader?'</span> <span class="pl-c1">+</span> <span class="pl-kos">(</span><span class="pl-c1">DEBUG</span> ? <span class="pl-s">'sourceMap&amp;'</span> : <span class="pl-s">'minimize&amp;'</span><span class="pl-kos">)</span> <span class="pl-c1">+</span>
    <span class="pl-s">'modules&amp;localIdentName=[name]_[local]_[hash:base64:3]'</span><span class="pl-kos">,</span>
    <span class="pl-s">'postcss-loader?parser=postcss-scss&amp;pack=compile'</span><span class="pl-kos">,</span>
    <span class="pl-s">'postcss-loader?pack=import'</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>scss<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
  <span class="pl-c1">include</span>: <span class="pl-kos">[</span>
    <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'../node_modules/bootstrap/scss'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'../node_modules/bootstrap/scss/mixins'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">loaders</span>: <span class="pl-kos">[</span>
    <span class="pl-s">'isomorphic-style-loader'</span><span class="pl-kos">,</span>
    <span class="pl-s">'css-loader?'</span> <span class="pl-c1">+</span> <span class="pl-kos">(</span><span class="pl-c1">DEBUG</span> ? <span class="pl-s">'sourceMap&amp;'</span> : <span class="pl-s">'minimize&amp;'</span><span class="pl-kos">)</span> <span class="pl-c1">+</span>
    <span class="pl-s">'modules&amp;localIdentName=[name]_[local]_[hash:base64:3]'</span><span class="pl-kos">,</span>
    <span class="pl-s">'sass-loader'</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">And the errors are, for example:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    ERROR in ./~/css-loader?sourceMap&amp;modules&amp;localIdentName=[name]_[local]_[hash:base64:3]!./~/postcss-loader?parser=postcss-scss&amp;pack=compile!./~/postcss-loader?pack=import!./src/components/App/App.scss
    Module build failed: Error: C:\path\to\project\node_modules\bootstrap\scss\_mixins.scss:18:1: Failed to find 'mixins/breakpoints' from C:\path\to\project
        in [
            C:\path\to\project\node_modules\bootstrap\scss,
            C:\path\to\project\src\components,
            C:\path\to\project\src\components\App
        ]"><pre class="notranslate">    ERROR <span class="pl-k">in</span> ./~/css-loader<span class="pl-k">?</span>sourceMap<span class="pl-k">&amp;</span>modules<span class="pl-k">&amp;</span>localIdentName=[name]_[local]_[hash:base64:3]<span class="pl-k">!</span>./~/postcss-loader<span class="pl-k">?</span>parser=postcss-scss<span class="pl-k">&amp;</span>pack=compile<span class="pl-k">!</span>./~/postcss-loader<span class="pl-k">?</span>pack=import<span class="pl-k">!</span>./src/components/App/App.scss
    Module build failed: Error: C:<span class="pl-cce">\p</span>ath<span class="pl-cce">\t</span>o<span class="pl-cce">\p</span>roject<span class="pl-cce">\n</span>ode_modules<span class="pl-cce">\b</span>ootstrap<span class="pl-cce">\s</span>css<span class="pl-cce">\_</span>mixins.scss:18:1: Failed to find <span class="pl-s"><span class="pl-pds">'</span>mixins/breakpoints<span class="pl-pds">'</span></span> from C:<span class="pl-cce">\p</span>ath<span class="pl-cce">\t</span>o<span class="pl-cce">\p</span>roject
        <span class="pl-k">in</span> [
            C:<span class="pl-cce">\p</span>ath<span class="pl-cce">\t</span>o<span class="pl-cce">\p</span>roject<span class="pl-cce">\n</span>ode_modules<span class="pl-cce">\b</span>ootstrap<span class="pl-cce">\s</span>css,
            C:<span class="pl-cce">\p</span>ath<span class="pl-cce">\t</span>o<span class="pl-cce">\p</span>roject<span class="pl-cce">\s</span>rc<span class="pl-cce">\c</span>omponents,
            C:<span class="pl-cce">\p</span>ath<span class="pl-cce">\t</span>o<span class="pl-cce">\p</span>roject<span class="pl-cce">\s</span>rc<span class="pl-cce">\c</span>omponents<span class="pl-cce">\A</span>pp
        ]</pre></div>
<p dir="auto">The <code class="notranslate">webpack.config.js</code> looks like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  ...
  entry:  {
    polyfill: 'client/polyfill',
    head:     'client/head',
    tutorial: 'tutorial/client',
    profile:   'profile/client',
    footer:   'client/footer'
  },
 plugins: [
    new CommonsChunkPlugin(&quot;head&quot;, &quot;head.js&quot;),
  ]"><pre class="notranslate">  ...
  entry:  <span class="pl-kos">{</span>
    <span class="pl-c1">polyfill</span>: <span class="pl-s">'client/polyfill'</span><span class="pl-kos">,</span>
    <span class="pl-c1">head</span>:     <span class="pl-s">'client/head'</span><span class="pl-kos">,</span>
    <span class="pl-c1">tutorial</span>: <span class="pl-s">'tutorial/client'</span><span class="pl-kos">,</span>
    <span class="pl-c1">profile</span>:   <span class="pl-s">'profile/client'</span><span class="pl-kos">,</span>
    <span class="pl-c1">footer</span>:   <span class="pl-s">'client/footer'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
 <span class="pl-s1">plugins</span>: <span class="pl-kos">[</span>
    <span class="pl-k">new</span> <span class="pl-v">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-s">"head"</span><span class="pl-kos">,</span> <span class="pl-s">"head.js"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span></pre></div>
<ol dir="auto">
<li>
<p dir="auto">Do I get it right that <code class="notranslate">CommonsChunkPlugin</code> looks for common modules in <em>at least two entries</em>? So that if there's a common chunk in <code class="notranslate">head</code> and <code class="notranslate">tutorial</code>, it will extract it even if it's not used anywhere else?</p>
</li>
<li>
<p dir="auto">And if there's a common require in <code class="notranslate">profile</code> and <code class="notranslate">footer</code> (but nowhere else), will it also go to <code class="notranslate">head</code>?</p>
</li>
<li>
<p dir="auto">...And if there's a <code class="notranslate">require</code> in <code class="notranslate">head</code>, then the module will remain in <code class="notranslate">head</code>, and never duplicated? (that's important, cause I initialize it in <code class="notranslate">head</code>).</p>
</li>
</ol>
<p dir="auto">To my understanding, the answer is 'Yes' for all 3 questions, but I tried to check the source, in <code class="notranslate">CommonsChunkPlugin.js</code> the line <code class="notranslate">compilation.plugin(["optimize-chunks", "optimize-extracted-chunks"], function(chunks) { ... }</code> provides the initial chunks, and I couldn't find the documentation about what "optimize-chunks" and "optimize-extracted-chunks" give.</p>
<p dir="auto">Thank you very much :)</p>