All geek questions in one place

CSS propagation using the React component

I have a React component index.jsthat has a style in style.css.

I want to distribute this component on npm, but I am confused about how I can facilitate the use of style by other developers.

There are three options I've seen:

  • Use require('./style.css')and rely on users with a solution for bundling (eg, webpack, rollup). I do not like this solution because it forces users to use a specific route to use my component.
  • Make the user import the style with <link rel="stylesheet" href="node_modules/package/style.css" />. I do not like this solution, as it means that my users will have to make changes to their HTML, and not just include the React component where they want it.
  • Put CSS in the component itself with a plugin like react-jss . This is not a viable solution for me, since I have a large number of SCSS files that make up the style for my component.

None of these solutions meet my needs and make it difficult to use my component. How can I distribute a component so that users can easily use it?

+4
source share
3

, . README.md:

CSS!

ES6 , Webpack:

import 'package/dist/style.css';

, HTML:

<!DOCTYPE HTML>
<html>
 <head>
   ...
   <link href="node_modules/package/dist/style.css" rel="stylesheet" />
   ...
 </head>
 ...
</html>

.

, :

+7

GG, js- css.

import 'package/dist/style.css';

, Webpack, css, . , , css-in-js .

, css :

package/dist/style.js

var insertCss = require('insert-css'); // https://github.com/substack/insert-css
// inline the whole style.css here
insertCss(".YourComponent { color: blue }");


import 'package/dist/style';

(Webpack, Browserify, Rollup...) .

+1

css npm .

  • Those who prefer to use css as css can duplicate a stylesheet
  • Those who prefer to use assembly tools can fulfill the request
0
source

Source: https://habr.com/ru/post/1669954/

More articles:


All Articles