mrchief
commented
6 years ago I formatted your rules to better understand it and I see a subtle typo
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader'
}]
}),
include: /node_modules[/\]react-dropdown-tree-select/
}, {
test: /.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[Name][local][has:base64:5]'
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},You're missing an extra slash in include: /node_modules[/\]react-dropdown-tree-select/. Should be include: /node_modules[/\\]react-dropdown-tree-select/ (notice it's [/\\]). In case of regex, that extra slash matters.
The other thing I would ask you to verify is that you're importing your custom css (the one that has material design overrides) somehwere in your code. Nothing else pops out.
If you still have issues, I'd suggest to create a sample repo that reproduces your issue and I can look further.
xporium
hi, i m new in react, actually i follow your steps and install react dropdown tree select in my project. even i also added webpack rule which mentioned. But if i try with custom css like material or bootstrap than its not working. if i remove rule from webpack than default css also not working so can any one tell me which rule or configuration i have to add in webpack?
i{ test: /.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader' } ] }), include: /node_modules[/\]react-dropdown-tree-select/ }, { test: /.css$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, modules:true, localIdentName:'[Name][local][has:base64:5]' }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, ], },