Comments (7)
π Also agreed - webpack's styling methods are really not great for production work. I have found that I can't get around the styling without using !important
so I'd suggest building it as avanes said, and allow people to control how they would like the built CSS file in webpack themselves.
i.e. I can access the style sheet separately if I were using less
via:
import 'react-scrollbar/src/less/scrollbar.less';
import 'react-scrollbar/src/less/site.less';
And this way I have options. I don't think people expect CSS to be built inline like this. You could also expose a main file that uses the inline style and create another file without it i.e.
import 'react-scrollbar/src/less/scrollbar.less';
import 'react-scrollbar/src/less/site.less';
import ScrollArea from './scrollArea.jsx';
export default ScrollArea;
And the one without:
import ScrollArea from './scrollArea.jsx';
export default ScrollArea;
from reactscrollbar.
As my colleague pointed out, obviously people can get around this with CSS specificity but I expect most would rather not.
from reactscrollbar.
Hi,
The main reason to use builtin inline styles is that I like when I can import some library or component only with one import/require() statement. For me it's annoying to localize where the main styles are in node_modules and to include them separately. So that's the main reason for doing it that way. But maybe only for me bundling css styles together with component is better solution ;)
@marksyzm I like your idea about creating two dist files. One(default) with inline styles and another without it. So do you think that it's a good solution or you prefer only one, default file without inline styles?
from reactscrollbar.
@souhe I think it'll be great to have main file with inline styles, and another one without inline css (plus third extracted css, or we can still use less from src). It's easy to add resolve.alias to webpack's config to import new files from node_modules folder with short syntax.
from reactscrollbar.
Yeah, same, main file with, optional one without, so I could do:
var ScrollArea = require('react-scrollbar/no-css');
or
import ScrollArea from 'react-scrollbar/no-css';
from reactscrollbar.
Ok, i'll do that.
from reactscrollbar.
require('react-scrollbar/no-css');
is supported since now in version v0.4.0
from reactscrollbar.
Related Issues (20)
- #129 is not in NPM HOT 4
- ScrollArea content should not get the focus when the user is scrolling HOT 4
- Update container size
- reactScrollbar is failed run with next.js HOT 2
- Page not scrollable vertically on Android, over container with horizontal scroll HOT 2
- The display state of the scroll bar has not been correlated with changes in the content area.
- Unable to perform Vertical Scroll using Touch pad in Internet Explorer and Edge.
- Horizontal scrollbar is not working HOT 3
- Firefox26οΌ stopScrollPropagation is not working
- Warning on latest react version
- Firefox and mouse wheel - doesn't work.
- Top and bottom paddings in .scrollbar-container element
- δΊδ»Άε€η HOT 1
- Zoom in Chrome.
- How to scroll to element
- scrollToBottom HOT 1
- Need help for horizontal scroll HOT 1
- Unable to preventDefault inside passive event listener invocation.
- ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
- implementing scroll to bottom
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactscrollbar.