I have a create-react-app
not ejected and rewired with react-app-rewired
and customized with customize-cra
.
This is the scenario and I currently can't change it.
Here it is the configuration of config-overrides.js
:
const path = require('path')
const fs = require('fs')
const {
override,
overrideDevServer,
watchAll,
removeModuleScopePlugin,
addWebpackModuleRule
} = require('customize-cra')
const theme = process.env.REACT_APP_THEME
const currentDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(currentDirectory, relativePath)
module.exports = {
webpack: override(
removeModuleScopePlugin(),
addWebpackModuleRule({
test: /\.svg$/,
loader: 'raw-loader',
include: [
resolveApp('../source/' + theme + '/icons/dist')
]
})
),
devServer: overrideDevServer(
watchAll()
),
paths: paths => {
paths.appBuild = path.join(paths.appBuild, theme)
return paths
}
}
A new need now is to import in the app some css
from a local package, setup in package.json
with a local namespace
"dependencies": {
"@namespace/helpers": "*",
I thought to use react-app-rewire-multiple-entry
that seems the perfect lib to import multiple entries for a rewired create-react-app
Here is the new update:
const path = require('path')
const fs = require('fs')
const {
override,
overrideDevServer,
watchAll,
removeModuleScopePlugin,
addWebpackModuleRule
} = require('customize-cra')
const theme = process.env.REACT_APP_THEME
const currentDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(currentDirectory, relativePath)
// new css entries configuration
const cssEntries = require('react-app-rewire-multiple-entry')([
{
entry: './src/index.tsx',
helpers_1: '../node_modules/@namespace/helpers/dist/index.css',
helpers_2: '@namespace/helpers/dist/index.css'
}
])
module.exports = {
webpack: override(
cssEntries.addMultiEntry, // new css entries
removeModuleScopePlugin(),
addWebpackModuleRule({
test: /\.svg$/,
loader: 'raw-loader',
include: [
resolveApp('../source/' + theme + '/icons/dist')
]
})
),
devServer: overrideDevServer(
watchAll()
),
paths: paths => {
paths.appBuild = path.join(paths.appBuild, theme)
return paths
}
}
But both approaches currently implemented (first helpers_1: '../node_modules/@namespace/helpers/dist/index.css',
and then helpers_2: '@namespace/helpers/dist/index.css'
) are not loading the css in the create-react-app
.
Any ideas to fix it? Or something wrong that you see?
Thanks in advance