I want to publish a ui library using react. But I'm confuse about how to deal with styles.
For example, if I write code in a project.I will using webpack && babel to build my code, and it will create a *.css file.
import React from 'react';
import './index.less';
export default function() {
return (
<div>
123
</div>
)
}
But, if I just write react compoents, I will use babel to compile my code.There is not css-loader to deail with *.less file. And after compiling, there is requre('./index.less') in the code, but it can't find file. So if I still want to write my code like above, how can I to publish this comonents with *.css.
Have you looked into available options there are around styling components in React? Because there are a lot of options here and it comes down to what you prefer. Just a quick google search will give you many options.
My personal favorite package to use is the styled-components one.
Related
I am trying to configure a NextJS project. I want to use CSS modules. However, I don't want to add *.module.* extension to file names and thus adding it to import paths, since it seems to me as excessive.
I found in css modules documentation that they didn't use module extension.
I tried to customize webpack configuration with loaders within next.config. Without any luck.
So, I am wondering if there is any way to be able to use just someName.css in NextJS. Then I could import it to my component just like this: import style from './someName.css'
I am developing my own library of react components. I am using rollup to create the build. I also want to ship css along with it which i bundled into a single styles.css file. My concern is how a user would use it. They can simply import the components using import { Component1, Component2 } from 'my-library' but they are not styled by default. This can be solved by importing the css file: import 'my-library/build/styles.css' but i feel like this import is redundant, i want the css file to be included by default in my library index.js file. I am not sure how can i achieve this.
I am using rollup and rollup-plugin-postcss.
So my question is how do i do this? Should i use some rollup plugin? Is my idea right in the first place? Maybe i should leave it to the user to decide how they want it bundled because my approach forces them to use some loader for css files?
If you want to ship external styles (instead of e.g. a CSS-in-JS system such as Emotion), that "redundant import" way is the standard, exactly because you can't know how the user of your library wants the styles applied to their page, or which loader (or bundler!) they'd want to use.
It's also possible there's no document to inject styles into at all, in case your users are server-side-rendering your component to be hydrated on the client side.
This is a very specific question, but I am using the Chakra UI component library for React and I want to import my own custom css files, although it doesn't allow me to do this.
I don't know if this is a bug or if it is intended, but is there any way I can go around it?
Thanks.
Make sure that you import css files in right place. Try to import your css files into App.js or if be more specific into the file where you init ChakraProvider. This approach works fine for my project:
import { ChakraProvider } from '#chakra-ui/react';
import './yourCssFile.css';
You can extend or override a token in the default theme by importing the extendTheme function. You can override properties as well as add new ones.
But if you want to add an external CSS file, I've found out from reading the docs that in order to import other file types (.css, .woff or .svg) in your theme file, you'll need to move those imports out of the theme file.
I am creating a component library where I do not want to have global CSS. Therefore, every component is scoped.
When running the production build via
vue-cli-service build --target lib --name sc components/index.js, everything is compiled into sc.css and dist/css/1.392e001d.css.
If possible, I want to keep the css and/or scss combined with the vue file or js.
The reason I want to do this is to enable users of the library to import a singular component from the library. The users could then use the component anywhere without having to import/include a css file.
If this is not possible, is there a way to accomplish the desired functionality?
From the Vue CLI docs for css.extract:
When building as a library, you can also set this to false to avoid your users having to import the CSS themselves.
// vue.config.js
module.exports = {
css: {
extract: false
}
}
I'm trying to break up my monolithic React app into reusable parts that can be shared with other projects.
I want to extract some generic components (e.g. Button, Header, Dropdown, etc.) into my own little UI library. The problem I'm running into is how to manage the CSS. Right now, my app just has a single stylesheet that takes care of everything.
These are the solutions I have seen:
Embed the CSS styles for each component in the JS for the component itself (CSS in JS).
import or require the CSS files in the JS for the component and use webpack to bundle the CSS file for you.
I really don't love either option. I understand the appeal of co-locating the styles with the component, but I feel like: a) it clutters the component definition, and b) it fights with how CSS works (no more taking advantage of cascading styles since everything is so tightly scoped to the individual component).
And, I can't bring myself to import a CSS file. That just feels so wrong. We're not even writing javascript anymore at that point.
I realize that these aren't exactly popular opinions, but is there a 3rd option that I'm missing for getting a good old fashioned CSS file from an NPM module that I can just drop in my HTML and use? Ideally one that doesn't involve copy/pasting it from node_modules. :)
Thanks to the tip from #EmileBergeron I found the PostCSS import plugin. It can find and inline stylesheets in node_modules and in your own code.
So, my workflow will be:
npm install my-ui-library
Import the React components you want to use into your JS files import { Button } from 'my-ui-library'
Import the corresponding stylesheets into your CSS files #import 'my-ui-library/Button.css'
That way I'm importing CSS into CSS and JS into JS which feels a lot more natural to me. It might also make sense to just have one stylesheet for all components instead of breaking it up per-component, but that's a detail I can figure out later.
Then, I just need to add PostCSS into my build system to inline everything which has been pretty simple in testing.