Closed Thomas-Smyth closed 4 years ago
This looks to be the problematic section of argon-dashboard-react.css
that is causing the issues.
.icon-xl {
width: 5rem;
height: 5rem; }
.icon-xl i, .icon-xl svg {
font-size: 4.25rem; }
.icon-xl + .icon-text {
width: calc(100% - $icon-size-xl - 1); }
.icon-lg {
width: 4rem;
height: 4rem; }
.icon-lg i, .icon-lg svg {
font-size: 3.25rem; }
.icon-lg + .icon-text {
width: calc(100% - $icon-size-lg - 1); }
.icon-sm {
width: 2rem;
height: 2rem; }
.icon-sm i, .icon-sm svg {
font-size: 1.25rem; }
.icon-sm + .icon-text {
width: calc(100% - $icon-size-sm - 1); }
Manually copying those variables to the CSS file allows for a successful build.
Same problem for me! If I run it locally it works. But when I deploy it with Heroku I get the exact same error.
Hello there, @Thomas-Smyth @Leo1212 ,
Thank you for your interest in working with our products. Sorry for this late response, since I am a Christian I've had some free days for the Easter Holiday:
Please go inside src/assets/scss/custom/_icons.scss
and delete the following lines:
width: calc(100% - $icon-size-sm - 1);
width: calc(100% - $icon-size-lg - 1);
width: calc(100% - $icon-size-xl - 1);
width: calc(100% - #{$icon-size} - 1);
Also, for deploying you will have to delete the homepage prop from the package.json file.
All the best, Manu ReactJS Developer at Creative-Tim.com (http://creative-tim.com/)
Please go inside src/assets/scss/custom/_icons.scss and delete the following lines:
- width: calc(100% - $icon-size-sm - 1);
- width: calc(100% - $icon-size-lg - 1);
- width: calc(100% - $icon-size-xl - 1);
- width: calc(100% - #{$icon-size} - 1);
This should actually be src/assets/scss/core/icons/_icon.scss
.
Hello again, @Thomas-Smyth , @Leo1212 ,
Please go inside src/assets/scss/custom/_icons.scss and delete the following lines:
- width: calc(100% - $icon-size-sm - 1);
- width: calc(100% - $icon-size-lg - 1);
- width: calc(100% - $icon-size-xl - 1);
- width: calc(100% - #{$icon-size} - 1);
This should actually be
src/assets/scss/core/icons/_icon.scss
.
Sorry for this confusion, you are right. Also, I've just realized that I've given you bad instructions. To solve this issue you can also replace:
* width: calc(100% - $icon-size-sm - 1);
* width: calc(100% - $icon-size-lg - 1);
* width: calc(100% - $icon-size-xl - 1);
With
* width: calc(100% - #{$icon-size-sm} - 1);
* width: calc(100% - #{$icon-size-lg} - 1);
* width: calc(100% - #{$icon-size-xl} - 1);
And everything will work just fine.
Once again sorry for the bad info.
All the best, Manu ReactJS Developer at Creative-Tim.com (http://creative-tim.com/)
Since this package is also available on npm could you implement this fix on your side? I would prefer not to store whole package in my project's repo and writing a script that replaces code in node_modules after npm install and before npm build doesn't seem like clean idea
Hello there, @kkragoth ,
Thank you for your interest in working with our products and for your feedback. We'll see what we can do in our next updates. One question, do you mean that on npm we should only put the scss/css?
Best, Manu
@EINazare I didn't mean this. I meant that in my project I import css from src/assets/css from folder of this package installed in node_modules
Hello again, @kkragoth ,
Could you please give me something like this:
### What are you doing now?
- Answer here (I import my css like this:, I import that component like this.. My code looks like this)
- Or, a step by step guide on what are you doing now
### What would you like to be doing?
- Answer here (I would like to import my css like this:, I would like to import that component like this.. I would like my code to look like that)
- Or, a step by step guide on what would you like to be doing
@EINazare I didn't mean this. I meant that in my project I import css from src/assets/css from folder of this package installed in node_modules
At the moment, I am not sure if you say that you would like to import our css something like:
import "argon-dashboard-react.css"; // this is not possible
Also, I do not know if at the moment you are importing our css something like:
import "node_modules/argon-dashboard-react/src/assets/css/argon-dashboard-react.css";
// if this is the case,
// you can easily shorten this link to
// "argon-dashboard-react/src/assets/css/argon-dashboard-react.css",
// but I can see how this link is a bit long,
// and a better one would be something like
// "argon-dashboard-react/build/style.css"
I would go with argon-dashboard-react/build/style.css
, but maybe you have a better idea, that is why I've asked the first question.
Anyhow, will wait for your response.
Best, Manu
Hello again, @Thomas-Smyth , @Leo1212 ,
Please go inside src/assets/scss/custom/_icons.scss and delete the following lines:
- width: calc(100% - $icon-size-sm - 1);
- width: calc(100% - $icon-size-lg - 1);
- width: calc(100% - $icon-size-xl - 1);
- width: calc(100% - #{$icon-size} - 1);
This should actually be
src/assets/scss/core/icons/_icon.scss
.Sorry for this confusion, you are right. Also, I've just realized that I've given you bad instructions. To solve this issue you can also replace:
* width: calc(100% - $icon-size-sm - 1); * width: calc(100% - $icon-size-lg - 1); * width: calc(100% - $icon-size-xl - 1);
With
* width: calc(100% - #{$icon-size-sm} - 1); * width: calc(100% - #{$icon-size-lg} - 1); * width: calc(100% - #{$icon-size-xl} - 1);
And everything will work just fine.
Once again sorry for the bad info.
All the best, Manu ReactJS Developer at Creative-Tim.com (http://creative-tim.com/)
Trying to help the open source community:
- https://medium.freecodecamp.org/how-to-use-reactjs-with-webpack-4-babel-7-and-material-design-ff754586f618
- https://medium.freecodecamp.org/how-to-use-redux-in-reactjs-with-real-life-examples-687ab4441b85
- https://medium.freecodecamp.org/how-to-connect-a-react-design-system-with-firebase-and-redux-9646ca1c733f
- https://www.youtube.com/watch?v=raKV5Rb8oOM&list=PLWxSJr7LCl87rGlQtTo2PoX8hboUU0R8a
- https://www.youtube.com/watch?v=no2PD2kq-dE&list=PLWxSJr7LCl87OomktWFQVW30QDWtBqFlx
- https://www.udemy.com/learn-reactjs-with-webpack-4-babel-7-and-material-design/
If you've liked what you saw, help me with a comment, like, share or subscribe.
this is solved the problem.
same problem here
Hello there, @GregNing ,
Thank you for your interest in working with our products. Please read the above comments, your issue will be solved by following the steps given there. This will be fixed in our next update.
Best, Manu
successfully run build but when i deploy it in netlify only blank page
successfully run build but when i deploy it in netlify only blank page
Hello there, @hlmifzi ,
Sorry for this late reply, I did not understood your comment ar first. Just go ahead and delete the homepage prop from the package.json file. That will clear your issue.
Best, Manu
successfully run build but when i deploy it in netlify only blank page
Hello there, @hlmifzi ,
Sorry for this late reply, I did not understood your comment ar first. Just go ahead and delete the homepage prop from the package.json file. That will clear your issue.
Best, Manu
What did you mean homepage from package.json, I don't know what you mean? Can you explain detail to me
Delete this line from package.json: "homepage": "https://demos.creative-tim.com/argon-dashboard-react/",
.
Only change:
with
I know it's not the best solution, but if they require your project to work, I really think it's a good temporal solution.
Updated project dependencies, project compiles good, no need for any other code fix
"dependencies": {
"chart.js": "^2.9.3",
"classnames": "^2.2.6",
"moment": "2.24.0",
"node-sass": "^4.13.1",
"nouislider": "13.1.1",
"react": "^16.12.0",
"react-chartjs-2": "^2.9.0",
"react-copy-to-clipboard": "^5.0.2",
"react-datetime": "^2.16.3",
"react-dom": "^16.12.0",
"react-google-maps": "^9.4.5",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0-next.62",
"reactstrap": "^8.4.0"
},
"devDependencies": {
"@types/googlemaps": "^3.39.2",
"@types/markerclustererplus": "~2.1.33",
"@types/react": "^16.9.19",
"typescript": "~3.7.3"
}
Dependency updates are good to use. production build npm run build
still requires variable change. pull request #10 solves the issue.
Are these changes doing to be seen in master anytime soon?
As some feedback to the CreativeTim people... It's rather offputting from purchasing anything from CreativeTim if you release software with blatant bugs and take almost a year to fix it. I know this is the free version, however, given it's cut down from the more advanced paid versions you would have thought it would be easier to fix... especially when a fix has been listed here and a PR has been around for months. It makes me concerned that the support for the paid versions will be equally as abysmal.
Hello there, @Thomas-Smyth ,
Thank you for your interest in working with our products. That is why we have free themes, you can test them, and if they do not work the way you would expect, you will not buy the PRO version, or you can ask us how to solve those issues, if those issues are existent on the PRO products, how to fix them on the PRO products, etc. To be honest, every time someone asks me whether they should buy a product or not, I tell them to take a look at the FREE product first and see if they are satisfied with that version, if so, then they can buy the PRO version if not, it means that our products are not made for them.
Best, Manu
@EINazare thanks for the update in 1.1 branch, when time permits update Readme.md page it still points to 1.0
@Thomas-Smyth Please check the 1.1 branch. you can close the issue
Hello there, @srbala ,
The issue will be automatically closed after the v1.1.0 will be pushed to the master branch. I have to wait for one of my colleagues, we have a set of rules of how to update a product, and now, I can't push anything to the master branch without first checking with one of my colleagues. The v1.1.0 will be on the master branch by the end of this day.
Best, Manu
Hello again, @Thomas-Smyth , @Leo1212 ,
Please go inside src/assets/scss/custom/_icons.scss and delete the following lines:
- width: calc(100% - $icon-size-sm - 1);
- width: calc(100% - $icon-size-lg - 1);
- width: calc(100% - $icon-size-xl - 1);
- width: calc(100% - #{$icon-size} - 1);
This should actually be
src/assets/scss/core/icons/_icon.scss
.Sorry for this confusion, you are right. Also, I've just realized that I've given you bad instructions. To solve this issue you can also replace:
* width: calc(100% - $icon-size-sm - 1); * width: calc(100% - $icon-size-lg - 1); * width: calc(100% - $icon-size-xl - 1);
With
* width: calc(100% - #{$icon-size-sm} - 1); * width: calc(100% - #{$icon-size-lg} - 1); * width: calc(100% - #{$icon-size-xl} - 1);
And everything will work just fine. Once again sorry for the bad info. All the best, Manu ReactJS Developer at Creative-Tim.com (http://creative-tim.com/) Trying to help the open source community:
- https://medium.freecodecamp.org/how-to-use-reactjs-with-webpack-4-babel-7-and-material-design-ff754586f618
- https://medium.freecodecamp.org/how-to-use-redux-in-reactjs-with-real-life-examples-687ab4441b85
- https://medium.freecodecamp.org/how-to-connect-a-react-design-system-with-firebase-and-redux-9646ca1c733f
- https://www.youtube.com/watch?v=raKV5Rb8oOM&list=PLWxSJr7LCl87rGlQtTo2PoX8hboUU0R8a
- https://www.youtube.com/watch?v=no2PD2kq-dE&list=PLWxSJr7LCl87OomktWFQVW30QDWtBqFlx
- https://www.udemy.com/learn-reactjs-with-webpack-4-babel-7-and-material-design/
If you've liked what you saw, help me with a comment, like, share or subscribe.
this is solved the problem.
Sorry but src/assets/scss/core/icons/_icon.scss
I can't find this file
Prerequisites
Expected Behavior
React build to produce a successful build for deployment.
Current Behavior
React build error:
Failure Information (for bugs)
See above.
Steps to Reproduce
Simply running the
yarn run build
command throws this error.Context
I have made very few changes from the original download and none of these revolves around the SCSS / CSS. Edit - Just tested with the original copy I downloaded from your website and it throws the same error when building.
Failure Logs
See above.