score:2
so first i had to set an environmental variable in my package.json
file for my start script when i am doing local developement "start": "node_env=local react-app-rewired start",
then in my customizer-cra config-overrides.js
i set my node environmental variable const islocal = process.env.node_env === 'local';
and then i imported the minicssextractplugin plugin from webpack const minicssextractplugin = require('mini-css-extract-plugin');
then i put a ternary to check if the app is running locally where this does not occur or if it is in production where it does occur. the style-loader
was loading the chunk.css file before the compiled less
code in this situation but it could have been sass
also. so i change the code from this:
addwebpackmodulerule({
test: /\.less$/,
use: [
{ loader: 'style-loader'},
{ loader: 'css-loader' },
{ loader: 'less-loader' }
],
}),
to this:
addwebpackmodulerule({
test: /\.less$/,
use: [
{ loader: islocal ? 'style-loader' : minicssextractplugin.loader },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
],
}),
and that fixed the issue.
Source: stackoverflow.com
Related Query
- How to determine the order of css in my create react app build with webpack and customize-cra?
- How can I build a React app with Webpack and import an assets folder?
- I create a build of my react app and connected with electron.js. now how to connect my backend from server folder with electron
- How to import CSS modules with Typescript, React and Webpack
- Why does production build of React app (with Webpack and Babel) use wrong development env with HMR, which causes errors?
- How to analyze create react app build size and reduce it?
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- How to reduce react app build time and understanding behaviour of webpack when bundling
- How to use Turborepo for an existing react app created with Create React App in order to make it a monorepo?
- how to run my node application and react app in the same time with one command?
- Using LESS CSS with the latest Create React App
- Disable the bundle.js bundling file Webpack creates in React using Create React App or Craco? Or at least get 'Performance' to work with source maps
- Trying to deploy my REACT Webpack app to heroku. Everything works locally and the heroku build works. But I'm getting a 404 nginx
- How to deploy React app with docker and serve -s build
- How create a react app with a specific version using the npx command?
- I am trying to animate an object with css in react and change the animation (timing) dynamically, how can I set the style after animation end?
- Problem with npm build and babel in React Create App
- Build a CRUD App with React Hooks and the Context API
- How do I add WebPack polyfill to React App created with React Create App without ejecting?
- How to Create global styles with Styled components in react and next js and is it better to use combination of css files and styled component?
- How to create multiple swiper instance in a react component and control one with the swipe of another?
- What is the best way to build multi-language app with react and redux?
- Unable to build ES6 version of my React App with webpack and babel-preset-env
- How to create floating image transition with css and react
- How to create a " box with arrow edges in the bottom and placing textinput under the arrow edges" using css
- I am building react app with ag-grid and I am having an issue with trying how to put a link in the cell
- How to create a React app directly in the current folder
- How to test a className with the Jest and React testing library
- What is the difference between NextJs and Create React App
- How to set up Babel 6 stage 0 with React and Webpack
More Query from same tag
- How to store a list of select component in an array in react
- Div element opens from bottom to top with slide effect instead of top to bottom
- React set message while contacting service
- How to change className to element after click on another element in React
- next/image not working with props as image source
- Redux: can't use the store
- React how to call 1 promise after the previous promise is finish?
- align div elements vertically
- Redux store does not have a valid reducer
- reactjs setState is not a function on a JSON call
- bootstrap input is longer than fieldset border
- I used useLazyQuery in functional component, but I need to use the same with class component. How can I do it?
- What is prevState in ReactJS?
- Acessing specific table data from table row in React
- ReactSelect - Allow for Case Sensitive Creatable Options
- WalletConnect fails to get bundled with vite
- Generic Enum parameter
- Concat arrays in redux reducer
- React (Redux): Check if action has already been executed (Server Side rendering)
- onHover effect on ReactMapGL not scaling properly
- Parse XML data to JSON (or array) - Javascript/React
- How to access data from Context Provider using useContext?
- How to get full test coverage for the react code
- Module parse failed: Unexpected token (7:5) You may need an appropriate loader to handle this file type
- How to trigger useEffect() with multiple dependencies only on button click and on nothing else
- React/Babel embedded: unexpected token
- TailwindCSS - hide dropdown menu on mobile
- How do I get SwitchTranition to work with CSSTransition with TypeScript
- Hide button on small devices using Styled Components
- React Next.js not calling useEffect hook in production app