Closed pavinthan closed 5 years ago
CRA doesn't support postcss.config.js
since it already defines options/defaults
in webpack.config.js
, thereforepostcss-load-config
never searches for any config file. CRA would need to add a postcss.config.js/postcssrc.js
file to the project root instead of setting things up in webpack.config.js
.
postcssrc.js
module.exports = (file, options, env) => ({
plugins: [
// Add your own plugins here
'postcss-flexbugs-fixes': {}
'postcss-preset-env': {
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
}
]
})
💁♂️ I recommend checking out
parcel
for your use case. It works well by default for must react apps while it's easy to configurate things likebabel
,postcss
by adding a config file (e.gbabelrc.js
,postcssrc.js
) in case one needs it.
Thanks @michael-ciniawsky for your reply and I'll consider your suggestion too, could you please search postcss.config.js
if there are no any files defined in options then merge the root file config with options?
I know that is crazy way but that may help to fix that 😟
No sry, merging is deliberately not supported, because it comes with other potential annoyances (e.g plugin ordering, useless file searching in case one doesn't (want to) use a config file (currently indicated by setting options in the webpack.config.js
instead)). It's either or for simplicity reasons and addresses the 2 common ways to setup postcss-loader
. CRA is an opinionated wrapper around webpack
and choosed this setup for it's users. Either try to use CRA's eject
feature (no idea how it particularly works) or do yourself a favor and consider other options which suit your needs (own webpack.confg.js
, parcel, ...) in a better way.
Thanks @michael-ciniawsky, 🙇 for your kind of responses.
Hi @michael-ciniawsky if we add config path like this, it will this works, right ?
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
config: {
path: path.resolve(fs.realpathSync(process.cwd()), '.')
},
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
sourceMap: true,
},
}
No, since plugins are still specified which would require merging, for this reason currently no config searching happens if loader.options.plugins
is specified. One of the following setups should work (recommending the second one, which is also the default behavior)
{ path: process.cwd() }
or any other absolute path to start searching for a config file (generally used if only one config is needed, which is located at dirname('absolute path')
). No Config Cascading webpack.config.js
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
config: {
// Why is path.resolve && fs.realpathSync needed here ?
// `process.cwd()` should be sufficient since it already provides an absolute path
path: path.resolve(fs.realpathSync(process.cwd()), '.')
},
sourceMap: true
}
}
dirname(file)
(this.resourcePath
) to start searching for a config file upwards the file tree and therefore enables Config Cascading (default)webpack.config.js
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
sourceMap: true
}
}
thanks @michael-ciniawsky for your grateful explanation
Good explanation @michael-ciniawsky
Hi!
First thanks for your grate works, can you please merge root
postcss.config.js
config with provided options if not specified any config files in options andpostcss.config.js
available in project root directory.I try to add additional PostCSS plugin into my create-react-app project but It won't allow to add any additional plugins. also I tried to add that in CRA https://github.com/facebook/create-react-app/pull/5893#issuecomment-442228623 but that did not works.
I have created a Proposal in
postcss-loader
see https://github.com/postcss/postcss-loader/issues/403if this wrong may you please check any additional way to resolve this kind of issues, thanks.
Thanks