Nwb: Sass files with react-component missing after build

[arddor]

I recently started to work with Sass and wanted to share some common components between projects by making a collection. I therefore created a react-component module from nwb.

Now I'm in the situation where I would like to share the collection between my projects. Therefore I wanted to make a build with the build script of nwb. I initially thought I would get complete components with css, however it would also not be a problem if it were still the scss files (I import them in other projects which have sass configuration anyway) however in the output there are no scss files.

Is there a special setting necessary for build in order to keep the sass files in the build?

[insin]

files config in package.json controls what gets published to npm.

When you're tweaking it, you can run npm pack first to check what npm will publish when you run npm publish.

[arddor]

I guess you misunderstood my question / problem. Maybe an example can clarify it:

+-- src
   +-- components
       +-- button
            |-- button.js
            |-- button.scss
       +-- card
   +-- sass

In my structure button.js imports the style from button.scss with css modules.
Now I want to share those components private, therefore in which project needed I import that module direct from github. I like to use ES6 with the import statements. To simplify it I thought I could nwb build and get ES5 javascript and either CSS or SCSS files. However I get:

+-- lib
   +-- components
       +-- button
            |-- button.js
       +-- card

As you see after nwb buildthe scss files are missing and there is also no inline styling (it's still require('button.scss')).

I see two ways how I could solve my problem:

• Not build it and import the ES6 code, however it throws errors (I assume because it doesn't understand the ES6 imports and the node_modules is excluded). I therefore tried in the project where I import the code

babel: {
    include: /react-components/
 },

to also process the ES6 of the module but it gives errors.

• Build, but somehow get the scss files along (currently they are removed).

I would be thankful for help with either of the two possible solutions

[insin]

For a component nwb build is just using babel to transpile everything from src/ into lib/ - webpack isn't involved.

This sounds like #58, which is something I've not done much with or or figured out a good solution for.

[arddor]

Ok. How about the first solution? I leave everything as in src/. In a project where I need my react-components I install it from git and transpile the code in node_modules/react-component. How would you do that in nwb?
I tried:

babel: {
    include: /node_modules\/react-components/
 },

But I get parse failed Unexpected token in the /src of the project which imports react-components (not in node_modules/react-components)

[insin]

You would need to configure babel-loader to process those files (default is to exclude all of node_modules/), so you'd use webpack.loaders to configure the default babel-loader.

Assuming Webpack does what you want when you have both exclude and include config, something like:

{
  webpack: {
    loaders: {
      babel: {
        include: /node_modules[\\\/]react-components/
      }
    }
  }
}

[arddor]

Ok thank you. It still gives an error, but I guess I will eventually figure it out. However what confuses me is that the error is in src and not in node_modules/react-components

ERROR in ./src/index.js
Module parse failed: /Users/User/WebstormProjects/test/src/index.js Unexpected token (6:7)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:7)

[insin]

I think you might need to explicitly include src/ when using include, as the default config is based on excluding node_modules/.

https://webpack.github.io/docs/configuration.html#module-loaders

[arddor]

It works now thank you

[hackingbeauty]

I'm having the same issue. When publishing a component made with nwb, how do you package styles written in SASS? Has this been resolved?

[jswxwxf]

I also want to know how you resolve this issue!!!

[latenightluke]

@insin are there any new solutions to this problem? I am still trying to figure out how to package styles written in sass/scss to the final build. Thanks man!

[hwrod]

@LukeIvie See my solution at https://github.com/insin/nwb/issues/58#issuecomment-359526389

[jswxwxf]

I'm using --copy-files option:

nwb build-react-component --copy-files