React-datepicker: how to include the css file

[tzookb]

we are using es6 bundling with webpack.

Our css is bundled in our js code, for example:

import semantic from "../semantic/dist/semantic.min.css"; // eslint-disable-line
import datepicker from "react-datepicker/dist/react-datepicker.css";

the first file "semantic" works well, any ideas how I include the datepicker css as well?
thanks

[rafeememon]

Have you tried importing without assigning to a variable, e.g. import "react-datepicker/dist/react-datepicker.css";? I'm not sure it makes sense to assign a default import for a CSS file. What is the exact problem you're having?

[tzookb]

@rafeememon thanks!

should I do like that:

import "react-datepicker/dist/react-datepicker.css";

I simply get the html but with no design :/

[tzookb]

my webpack config:

/* eslint-disable no-undef */
var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var pkg = require("./package.json");

module.exports = {
    eslint: {
        emitError: true,
        configFile: ".eslintrc.json",
        failOnError: false
    },
    entry: {
        app: [
            "babel-polyfill", "./src/App.jsx"
        ],
        vendor: Object.keys(pkg.dependencies)
    },
    output: {
        path: './dist',
        filename: '/[name].bundle.js'
    },
    externals: {
        "bundle!semantic-theme": "semantic-theme"
    },
    devtool: "source-map",

    resolve: {
        root: [
            path.resolve("./semantic/dist"), path.resolve("./src"), path.resolve("./src/assets"), path.resolve("./src/components")
        ],
        extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor', '/[name].bundle.js'),
        new HtmlWebpackPlugin({title: "mediaQrator", filename: "index.html", template: "src/index.html"}),
        // new ExtractTextPlugin("styles.css")
    ],

    module: {
        loaders: [
            {
                test: /.json$/,
                loaders: ["json"]
            }, {
                test: /\.jsx?$/,
                loader: "babel-loader",
                include: path.resolve(__dirname, "src")
            }, {
                test: /\.(png|jpg)$/,
                loader: "file-loader?name=/images/[name].[ext]"
            }, {
                test: /\.(woff2?|eot|ttf)$/,
                loader: "file-loader?name=/fonts/[name]_[hash:base64:6].[ext]"
                //exclude: /semantic/
            }, {
                test: /\.css$/,
                loader: "style-loader!css-loader?module=true&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]",
                exclude: /semantic/
            }, {
                test: /semantic.*\.css$/,
                loader: "style-loader!css-loader?importLoaders=1" //Make sure module=true is not enabled to avoid local:: styles
            }, {
                test: /\.svg$/,
                loader: "url-loader?limit=10000&mimetype=image/svg+xml"
            }
        ],

        preLoaders: [
            {
                test: /\.jsx?$/,
                loader: "eslint-loader",
                exclude: /node_modules/
            }, {
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    },

    devServer: {
        port: 3000
    }
};

[benmratner]

I'm actually having this same problem. It loads the datepicker styles if you remove the modules argument from the css loader. So:
{ test: /\.css$/, loader: 'style!css', }

This isn't really a fix though, since now we can't use css-modules anywhere else in the project.

[rafeememon]

I'm guessing that the loader is prefixing the datepicker class names in the CSS, which will cause the class names in the JS to not match; you can verify this by inspecting the compiled code. We don't officially support CSS modules but PRs to that end are welcome.

@benmratner, as a workaround you could define the loader to only have this behavior for things under node_modules/react-datepicker and have a separate loader definition for the rest of your styles that include CSS modules.

[benmratner]

You're right - the css class names get changed when loaded with the modules flag on. I took your suggestion and attempted:

{ test: /react-datepicker\.css$.*$/, loader: 'style!css', },

{ test: /\.css$/, loader: 'style!css?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]', }

Which appeared to grab just the datepicker css file, but then gave me this error:

ERROR in ./~/css-loader!./~/style-loader!./~/css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]!./~/react-datepicker/dist/react-datepicker.css
Module build failed: CssSyntaxError: /css-loader!/.../node_modules/style-loader/index.js!/.../node_modules/css-loader/index.js?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]!/.../node_modules/react-datepicker/dist/react-datepicker.css:5:1: Unknown word

3 | // load the styles

4 | var content = require("!!./../../css-loader/index.js?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]!./react-datepicker.css");
5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // add the styles to the DOM
7 | var update = require("!./../../style-loader/addStyles.js")(content, {});

Any ideas?

[rafeememon]

@benmratner is the loader being applied twice to react-datepicker.css? You'll probably want to exclude it from the second rule

[benmratner]

Tried this:

{ test: /react-datepicker\.css$.*$/, loader: 'style!css', },
{ test: /^(?!^react-datepicker)(?=.*\.css$).*$/, loader: 'style!css?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]', },

Same error though.

[benmratner]

@rafeememon So that error is actually in style loader, and it appears that webpack is grabbing the datepicker css file twice like you said, despite the regex telling it not to. I ended up just scrapping css modules from that webpack loader, and I'm using it only when the file is .scss, which I was already using anyway. Not really a fix, but maybe helpful for future debuggers?

[rafeememon]

@benmratner, maybe you can use a combination of include/exclude as opposed to a more complicated regex; semantically that's more accurate of what you're trying to accomplish anyway =)

[alex-cory]

Ugh, this is the most used date picker. Why does it not already work with css-modules...

[rafeememon]

@alex-cory, feel free to help out to get CSS modules working

[ro-savage]

@rafeememon

I have created PR #691 to allow react-datepicker to work with CSS Modules.

[xadiadi]

I am using version:2.8.0
there is file for css module
import "react-datepicker/dist/react-datepicker-cssmodules.css";

[cristofer]

for the ones using react_rails, you must import it in the scss file that corresponds to the view that renders the react component, in my case I added the import in app/assets/stylesheets/index.scss:

@import "react-datepicker/dist/react-datepicker";

Important to notice that the css extension must be omitted here.