Include .css to build

[miguelcrespo]

Hi. I have a React component that import a .css and I would want to know how to include that file into my dist folder, because the file is not event moved.

Also I want to know how to already import the css into my js file to avoid the error dist/styles.css Unexpected token when my module is requested.

Thank you for your help.

[juliancwirko]

I am not sure if I understand, but have you used 'prepublish' task? It should do the job.

[ghost]

Im having trouble with this as well. Ive tried running the 'prepublish' task. I can see the js files in the dist folder but no css. Many Thanks.

[juliancwirko]

Hi, I think I misunderstood it previously.

The prepublish will only transpile .js files. If you need css or scss support you should integrate for example https://github.com/sass/node-sass#usage-1 or standard copyfiles in case of .css in prepublish script here : https://github.com/juliancwirko/react-npm-boilerplate/blob/master/package.json#L23 You can split the tasks and merge them in one prepublish task like for example:

"scripts": {
    "prepublish": "npm run build-js && npm run build-css"
    "build-js": "babel --plugins transform-es2015-modules-umd src --ignore __tests__ --out-dir ./dist",
    "build-css": "node-sass src/styles/ -o dist/styles",
}

or just

"prepublish": "babel --plugins transform-es2015-modules-umd src --ignore __tests__ --out-dir ./dist && node-sass src/styles/ -o dist/styles",

I am not sure if this should land in this package. I don't want to include everything here. This should be a simple boilerplate. On the other hand most of the packages uses some kind of css files.

[ghost]

Thanks Julian, thats very helpful. Ive got that working now.

I understand your dilemma though, as developers may use direct css or various css preprocessors etc. Maybe these issue comments are enough for developers to find this bit of information.

Cheers,
Wes

[juliancwirko]

Yes, this is what is my main concern :) I guess I'll leave the link in the readme file.

[GajulaNagaPradeep]

Hi
I have created couple of components in my src file of the react-npm-boilerplate. Now how do i export these two components to make them available to any application that uses this package. Can any one help me with this. Thanks

[juliancwirko]

You need to run prepublish task (it should also run when you publish your package on npm). Then you need to publish the package on npm npm publish You need to have proper package.json file and an account on Npm

[juliancwirko]

I'll close this one for now. But feel free to open another one, more specific. Also regarding the main topic, I think the description and example is enough. Everyone can use different tools for handling css.