Nwb: Error importing css file

[tbillington]

Similar issue to https://github.com/insin/nwb/issues/126.

I have file-loader installed as a dev dependency.

nwb.config.js has

module.exports = {
    type: 'react-component',
    npm: {
        esModules: true
    },
    webpack: {
        extra: {
            devtool: 'cheap-source-map',
            module: {
                loaders: [
                    {
                        test: /\.css$/,
                        loader: "file"
                    }
                ]
            }
        }
    }
}

and in the code I'm writing import './Styles.css'.

After that I'm not getting it output in the es/ and lib/ directories.

[kristojorg]

+1

[insin]

Closing as a duplicate of #58 - v0.13.1 added a --copy-files flag to enable copying non-JS files over to es/ and lib/

[ralphsmith80]

Has anyone validated this? Maybe I'm not using it as expected, but it doesn't seem to be working.

I've got nwb "version": "0.15.6" installed and my goal is to be able to produce a library of react components using less for styling. The demo app is working, but it's blowing up in production because the less file is not present. I've also tried just using css with no success.

Here's what my setup looks like using just css:

index.js

import Error from './components/error/Error'

export {
  Error,
}

./components/error/Error.js

import React from 'react'
import './error.css'

const Error = (props) => {
  return (
    <section className='error__section'>
      <header className='error__header'>{props.title}</header>
      <p className='error__message'>{props.message}</p>
    </section>
  )
}

Error.defaultProps = {
  title: 'Data Access Error',
  message: 'The data required for this page is not currently available.',
}

export default Error

./components/error/error.css

.error {
  color: rgba(0,0,0,0.87);
  display: flex;
}
.error__section {
  margin: 1rem 0.75rem 0.5rem;
}
.error__header {
  font-size: 1.5rem;
}

And this is what the container/parent App looks like.
App.js

import React from 'react'
import {render} from 'react-dom'
import { Error } from 'my-react-components'

let App = React.createClass({
  render() {
    return (
      <main>
        <Error />
      </main>
    )
  }
})

render(<App/>, document.querySelector('#root'))

Finally here's the build commands I've tried using to build the react component library. I expect the first one to work based on the docs

1. npm run build --copy-files
2. npm run build --copy-file=css
3. npm run build --copy-file css

The end result is that no css (or less) files are present in /lib/components/error/ and as you would then expect I get the following error when building App.js

my-react-components/lib/components/error/Error.js
Module not found: ./error.css

[ianbrode]

@ralphsmith80 build command doesn't pass it to nwb.
you gotta edit your package.json script so it calls something like: "nwb build-react-component --copy-files"

[insin]

You need a -- argument to delimit arguments for npm and arguments for the command:

npm run build -- --copy-files

Adding it to your scripts as suggested is the way to go if you're always going to be using it.

[a-eid]

npm run build -- --copy-files has not effect. still getting the same error about not finding the css file.