don't work styles

[pMonfared]

i use webpack 3.4.1 : (configuration file)

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var pkg = require('./package.json');

// bundle dependencies in separate vendor bundle
var vendorPackages = Object.keys(pkg.dependencies).filter(function (el) {
    return el.indexOf('font') === -1; // exclude font packages from vendor bundle
});

/*
 * Default webpack configuration for development
 */
var config = {
    devtool: 'eval-source-map',
    cache: true,
    entry: {
        main: path.join(__dirname, "app", "App.js"),
        vendor: vendorPackages
    },
    output: {
        path: path.join(__dirname, "wwwroot", "js"),        //Note: For ASP.NET Core we need to put the output in wwwroot/js
        //in production mode make files have a .min.js ending - stops gulp's min:js concating them
        filename: process.env.NODE_ENV === 'production' ? '[name].min.js' : '[name].js',
        sourceMapFilename: '[file].map'
    },
    resolve: {
        extensions: ['.ts', '.js', '.json'],
        modules: [__dirname, 'node_modules']
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: true
        }),
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js' }),
        new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })
    ],
    resolveLoader: {
        modules: ["node_modules"],
        extensions: [".js", ".json"],
        mainFields: ["loader", "main"]
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts)$/,
                exclude: /node_modules/,/*(node_modules|bower_components)*/
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["es2015", "react"]
                    }
                }
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,/*(node_modules|bower_components)*/
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'autoprefixer-loader'
                ]
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,/*(node_modules|bower_components)*/
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'autoprefixer-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(png|jpg|ttf|eot)$/,
                /*exclude: /node_modules/,/*(node_modules|bower_components)*/
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 100000
                    }
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

/*
 * If bundling for production, optimize output
 */
if (process.env.NODE_ENV === 'production') {
    config.devtool = false;

    config.plugins = [
        //new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            beautify: false,
            mangle: {
                screw_ie8: true,
                keep_fnames: true
            },
            comments: false,
            compress: { warnings: false, screw_ie8: true }
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ];
}

module.exports = config;

when i run cmd : dev-watch
webpack getback this error :

ERROR in ./node_modules/react-persian-datepicker/lib/styles/basic.css
Module parse failed: H:\GitLab\src\Sample\node_modules\react-persian-datepicker\lib\styles\basic.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .calendarContainer {
|   border-radius: 3px;
|   box-shadow: 0 3px 10px #dbdbdb;
 @ ./node_modules/react-persian-datepicker/lib/components/Calendar.js 255:10-40
 @ ./node_modules/react-persian-datepicker/lib/index.js

i changed webpack config loaders ( css ) to this codes :

test: /\.css$/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'autoprefixer-loader'
                ]

and webpack complie without any error
but don't show style for datepicker like this photo:

[maryam-mokhtari]

same problem

[mohebifar]

Can you please try logging require('react-persian-datepicker\lib\styles\basic.css')?

console.log(require('react-persian-datepicker\lib\styles\basic.css'));

[htondkar]

there is an alternative with working css:
https://www.npmjs.com/package/react-persian-calendar

[fahamidev]

@mohebifar

Hi .
i use "webpack": "^2.7.0"
and i do this :
import basic from 'react-persian-datepicker/lib/styles/basic.css';

then inside the constructor :

constructor(props) {
        super(props);
        console.log(basic);
}

And finally the result of the console is empty Object : {}

And in my webpack.config is like this :

{
                test: /\.css$/,
                include: /node_modules/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.s[ac]ss$/,
                exclude: /node_modules/,
                use: ['style-loader',
                    {
                        loader: 'css-loader',
                        options: {sourceMap: true}
                    },
                    'sass-loader'
                ]
            }

thanks for your help

[mohebifar]

@htondkar @pMonfared @mayyamak You must set the modules option of css-loader to true:

{ loader: 'css-loader', options: {modules: true, sourceMap: true} }

[fahamidev]

@mohebifar thanks for your help . I set up the ( options ) and it works right now.

But there is another problem . When click on day, the (div.tether-element)class does not close .
What is your idea for this problem.solution ?

[soroushoracle]

Use this css file. @thg303 gathered it from the one in the repository. don't forget to fix the extension to ".css"
evan-calender-style.css.txt

After adding styles, you need to present the styles to the DatePicker :

const styles= {
calendarContainer: 'calendarContainer',
dayPickerContainer: 'dayPickerContainer',
monthsList: 'monthsList',
daysOfWeek: 'daysOfWeek',
dayWrapper: 'dayWrapper',
selected: 'selected',
heading: 'heading'
}

then:

<DatePicker calendarStyles={styles}/>

[FareheSoheil]

@mohebifar tnx this was a great help :)

[FareheSoheil]

@mohebifar is there anyway to include the styles without setting 'modules' to true?
because it messes up some other styles on my app :(

[asiye]

const styles = {
calendarContainer: "calendarContainer",
dayPickerContainer: "dayPickerContainer",
monthsList: "monthsList",
daysOfWeek: "daysOfWeek",
dayWrapper: "dayWrapper",
selected: "selected",
heading: "heading",
next: "next",
prev: "prev",
title: "title",
}

<Calendar styles={ styles } />
<DatePicker calendarStyles={ styles } />

[mohebifar]

@FareheSoheil What @asiye suggested is exactly what you would have to do if you don't want to use css-modules.

[FareheSoheil]

@asiye @mohebifar I did what you told , but still styles are not applied , although there are no undefined classes. Don't know what is happening :(