I am making a React component library downloadable through npm, Is there a specific way to bundle the styles into the package without having the end user explicitly import them? perhaps a webpack loader?
4
-
1have you tried anything?new Q Open Wid– new Q Open Wid2019-09-10 21:30:11 +00:00Commented Sep 10, 2019 at 21:30
-
Yes, there is a loader you are missing. Have a look at this article on it: A beginners guide for webpack 2. Everything you need to include css in your package is there.Jesse Reza Khorasanee– Jesse Reza Khorasanee2019-09-11 05:18:43 +00:00Commented Sep 11, 2019 at 5:18
-
The issue is the npm package doesn't have an html file to reference the CSS. I guess that is the part I'm confused about. Does webpack not bundle css from a node_modules component automatically?Mark– Mark2019-09-11 18:54:28 +00:00Commented Sep 11, 2019 at 18:54
-
2I am making an npm package. Babel compiles everything down to vanilla javascript which can not include CSS. I am curious if CSS in JS is the only option for this.Mark– Mark2019-09-11 19:31:57 +00:00Commented Sep 11, 2019 at 19:31
Add a comment
|
3 Answers
At first, you need to have your built css file(s) in your distributed package. Your webpack build (and your npm publish process) should do it.
Then the consumers of your library need to somehow include your css file(s) in their application (e.g.: with link in html head section or include it in less/scss files or import it directly to .js files with use of some webpack loader).
The webpack does not include css files automatically as it does not know they are necessary.
See for example these libraries, their css file has to be imported next to the js library itself:
2 Comments
Bhaskar
Can you please explain more on how to achieve the first part of your answer?
lavor
@Bhaskar You need to extract css in build process. Try to look at mini-css-extract-plugin: webpack.js.org/plugins/mini-css-extract-plugin
For others seeking an answer check out styled-components:
https://styled-components.com/
We ended up taking the css in js route for multiple reasons one of which it solves this issue.
Comments
The way I do this is using the copy-files and rimraf package.
npm i -D copy-files rimraf
I use tsc to transpile my files and build my package. The output goes into the lib folder. "outDir": "lib",
The tsc compiler uses the config file below to traverse my files and extract everything in to the lib.
Now typescript only cares about ts, tsx files but we might need to have along our components their css, scss files or png or svg files and icons.
So I have a build script that uses a special tsconfig file to build my files and then more scripts that use copy-files to copy the artefacts that the components utilize.
"clean": "rm -rf ./lib",
"prebuild": "npm run clean",
"build": "tsc --build ./tsconfig.build.json ",
"copy-files": "copyfiles -u 1 -E -V \"src/components/atoms/icons/images/**/*\" \"src/style/assets/**/*.otf\" \"src/style/base.css\" \"src/**/*.*css\" lib/",
"postbuild": "npm run copy-files",
{
"compilerOptions": {
"target": "es5",
"lib": ["es2015", "dom"],
"outDir": "lib",
"jsx": "react",
"module": "commonjs",
"declaration": true,
"declarationMap": true,
"skipLibCheck": true,
"sourceMap": true,
/* "inlineSourceMap": true, */
"strict": true,
"noImplicitAny": false,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"plugins": [{ "name": "typescript-plugin-css-modules" }]
},
"exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx", "**/*.stories.tsx", "./src/setupTests.ts"],
"include": ["src"],
"files": ["./src/index.ts"]
}
As we can see the above will transpile my files, save them packaged as a lib in the lib folder and then will copy any images, SCSS, CSS files etc in the lib output folder.
:)
