React-dates: Why has SCSS been removed?

Created on 14 Feb 2018  路  5Comments  路  Source: airbnb/react-dates

With react-dates v12 we had the great opportunity to style the date-picker through SCSS.

In v16 SCSS has been replaced by standard CSS. Theming shall be done with react-with-styles, but this does not work well if we have our color variables in SCSS.

Why has this been changed? How can we get SCSS support back?

question

Most helpful comment

You should be able to style the datepicker with scss no problem. I have a scss file for styling overrides that imports the default outputted css via an import at the top of my file, e.g.
scss @import "node_modules/react-dates/lib/css/_datepicker";
This solves that issue without needing to do anything additionally in gulp or webpack.

All 5 comments

+1

Hi @raphaelbeckmann @developer239, sorry for not responding to this issue. A lot of this happened with the move to the react-with-styles system and the fact that we had built out a CSS interface and had not yet built out one for Sass. Can you explain what feature you were using of scss that was necessary? Maybe we can get that back.

I also would like to see scss included with this module. Currently for my project, I am building an electron app that uses gulp (and potentially webpack), which uses purely sass and seamlessly integrates scss from external modules, which then is piped through my task runner, and compiled into a single css, without the need to merge from external sources. Sass also has an advantage with its flexibility and features as a pre-processor in general over css.

@cellsheet I think you could probably set up your gulp/webpack config to pull in css files as well as scss files. A lot of the flexibility and features that scss has over css are mainly in writing the styles, which consumers can still do and use our default outputted css and which we notably don't do in a stylesheet.

You should be able to style the datepicker with scss no problem. I have a scss file for styling overrides that imports the default outputted css via an import at the top of my file, e.g.
scss @import "node_modules/react-dates/lib/css/_datepicker";
This solves that issue without needing to do anything additionally in gulp or webpack.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

maxmoeschinger picture maxmoeschinger  路  68Comments

AntiFish03 picture AntiFish03  路  19Comments

majapw picture majapw  路  25Comments

mccambridge picture mccambridge  路  20Comments

asulaiman picture asulaiman  路  28Comments