felipeloha
commented
3 years ago solved in webpack: use: [{ loader: 'css-loader', options: { sourceMap: true, importLoaders: 1, modules: { localIdentName: '[name]__[local]___[hash:base64:5]', getLocalIdent: (context, localIdentName, localName, options) => { if (context._module.resource.includes('react-date-range') || context._module.resource.includes('PeriodFilter/style.scss')) return localName;
return false;
},
},
},
},
Subject of the issue
The component css classes are rendered only with the name but the css are imported with webpack with a different name. example: .default__rdrCalendarWrapper___2zUCS
[BUG] Bug Reproduce Steps
webpack config: `const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const { envVars } = require('./envVars'); const postCssConfig = require('./postCssNextConfig');
module.exports = { entry: [ '@babel/polyfill',
${__dirname}/app/index.jsx, ], output: { path:${__dirname}/build, filename: '[name]-[hash].js', },resolve: { extensions: ['.jsx', '.scss', '.js', '.json', '.ts', '.tsx'], },
module: { rules: [{ test: /.html$/, loader: 'html-loader', }, { test: /.(js|jsx|tsx)$/, use: [{ loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { modules: false, corejs: '2', useBuiltIns: 'entry', }], '@babel/preset-react', '@babel/preset-typescript', ], env: { development: { plugins: [ '@babel/plugin-syntax-jsx', ], }, }, }, }], exclude: /nodemodules/, }, { test: /(.scss|.css)$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{ loader: 'css-loader', options: { sourceMap: true, modules: true, importLoaders: 1, localIdentName: '[name][local][hash:base64:5]', }, }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ postCssConfig, ], }, }, { loader: 'sass-loader', options: { sourceMap: true, data:
@import "${__dirname}/app/components/theme.scss";, }, }, ], }), }, { test: /.svg(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader', }, { test: /.gif/, loader: 'url-loader', }, { test: /.jpg/, loader: 'url-loader', }, { test: /.png/, loader: 'url-loader', }, { test: /.xml$/, loader: 'xml-loader', }, ], }, optimization: { minimizer: [ // we specify a custom UglifyJsPlugin here to get source maps in production new UglifyJsPlugin({ cache: true, parallel: true, uglifyOptions: { compress: false, ecma: 6, mangle: true, }, sourceMap: true, }), ], },plugins: [ new HtmlWebpackPlugin({ template:
${__dirname}/assets/index.template.html, }), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production'), }, }), new ExtractTextPlugin('[name]-[hash].css'), new webpack.DefinePlugin(envVars), ], }; `we tried importing it in the scss as @import "~react-date-range/dist/theme/default.css"; or directly in the component as import { DateRange } from 'react-date-range'; import 'react-date-range/dist/styles.css'; import 'react-date-range/dist/theme/default.css';
It didnt work.
[BUG] Expected behaviour
either the components are rendered with the right class names or there is a way to configure the right css classes
Environment
Package Version: 1.1.3 React version: 16 Node version: 10 Browser: chrome