Change include/exclude for a loader

[TimonVS]

This issue is a:

• Bug report
• Feature request
• Question / support request
• Other

Is the version of nwb you're using installed globally or locally?

Locally

Which versions of Node.js, npm and nwb are you using (if using it globally)?

v7.4.0

---

I'm not quite sure if this is a bug, but in the configuration documentation you mention the following:

Generic rule options such as include and exclude can be configured alongside loader-specific options - you can also use an explicit options object if necessary to separate this configuration.

I implied that that meant that you could change include and exclude for a loader, like so:

module.exports = {
  rules: {
    'sass-css': {
      exclude: /sketch-web-components/,
      options: {
        modules: true
      }
    }
  }
}

This is the result in the Webpack config:

And that results in an error (WebpackOptionsValidationError). I assumed it would have changed the exlude configuration on the bottom.

Is it possible to change include/exclude in another way?

[insin]

TL;DR: sass-pipeline owns the include/exclude config - configure those there:

module.exports = {
  rules: {
    'sass-pipeline': {
      exclude: /sketch-web-components/
    },
    'sass-css': {
      modules: true
    }
  }
}

---

It looks like you're trying to configure one of the use-cases I intend to explicitly support in #223 - using CSS modules on only part of a project.

Unfortunately, you currently only get two rules to configure for CSS by default and two for each style preprocessor plugin you use - one for your app's own styles (sass-pipeline, which has exclude: /node_modules/ by default) and one for styles imported from dependencies (vendor-sass-pipeline, which has include: /node_modules/ by default). Currently you will have to configure one of these to enable CSS modules with appropriate include/exclude settings and configure the other one's include/exclude settings to handle all other stylesheets.

---

This was something which pickled my brain a bit when converting to Webpack 2...

Webpack 2 now has you provide rules instead of loaders, but when you're only using a single loader, it lets you use shorthand notation which makes the rule is synonymous with the loader, which looks just like it did with Webpack 1.

Chaining loaders in Webpack 1 was a hack - you provided a big string with multiple loaders in it. This is no longer the case in Webpack 2, which has first-class support for rules which chain multiple loaders specified using the new use connfig, which takes an Array of loaders.

For style pipelines, you now have 2 truly separate parts - the rule, which owns the include/exclude config and a list of loader objects which own loader + options config. Style pipeline rules in nwb are given a -pipeline id, css-pipeline and vendor-css-pipeline are set up by default and style preprocessor plugins get their own pipelines set up - sass-pipeline in this case.

[TimonVS]

Thanks @insin. In my case I wanted to exclude a linked module (sketch-web-components) from being compiled with CSS Modules option turned on.

I fixed it with the following config:

module.exports = {
  webpack: {
    define: config.globals,
    rules: {
      'sass-pipeline': {
        include: path.resolve(__dirname, 'src')
      },
      'vendor-sass-pipeline': {
        include: /sketch-web-components/
      },
      'sass-css': {
        options: {
          modules: true
        }
      },
      'sass-postcss': {
        plugins: postcssPlugins
      },
      'vendor-sass-postcss': {
        plugins: postcssPlugins
      }
    }
  }
}

But I suspect this is some weird issue that happened because I linked the package.