GithubHelp home page GithubHelp logo

Comments (5)

jackbilestech avatar jackbilestech commented on June 13, 2024 12

Hey All,
@einazare i've managed to find a way for this to compile.

I was able to trackdown in _navbars.scss where the issue was arising. On compilation the output file would contain a $sidebar-width variable which the react-build componnet seems to not understand potentially explaining why the build and start command worked differently.

https://stackoverflow.com/questions/17982111/sass-variable-in-css-calc-function - A similar issue was mentioned here. Because we were performing a calc operation, interpolation is needed for this type of compiler.

Using the below injection builds and compiles fine. Tested with both npm run compile-sass, npm run build & npm run start.

_navbars.scss

&.fixed{
        //width: calc(100% - $sidebar-width); // No Interpolation
        width: calc(100% - #{$sidebar-width}); //Interpolate
        right: 0;
        left: auto;
        border-radius: 0;
    }

Hope this helps and i haven't broken something else....

from light-bootstrap-dashboard-react.

einazare avatar einazare commented on June 13, 2024

Hello there, @alejandrojuarez675 ,

Thank you for your interest in working with our products.
Why did you not follow our rules of opening an issue:

<!--
 IMPORTANT: Please use the following link to create a new issue:

  https://www.creative-tim.com/new-issue/light-bootstrap-dashboard-react

**If your issue was not created using the app above, it will be closed immediately.**
-->

<!--
Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
👉  https://www.creative-tim.com/bundles
👉  https://www.creative-tim.com
-->

I've just made a quick test and everything worked as expected, no error was thrown.

Best,
Manu

from light-bootstrap-dashboard-react.

DaveFerBear avatar DaveFerBear commented on June 13, 2024

Was there ever a resolution to this? I'm having the same issue try to npm run build.

from light-bootstrap-dashboard-react.

einazare avatar einazare commented on June 13, 2024

Hello there, @DaveFerBear ,

I've just made a quick test and everything worked as expected, no error was thrown.
Please provide me with the following video:

  • Download the product
  • Unzip the product
  • Open terminal and cd into the project
  • Run node -v
  • Run npm -v
  • [Mac/Ubuntu/Linux] Run npm run install:clean
  • [Widnows] Run npm install
  • [Widnows] Run npm start
  • Showcase the issue

Best,
Manu

from light-bootstrap-dashboard-react.

crisecheverria avatar crisecheverria commented on June 13, 2024

After the update with the Interpolation from @jackbilestech it worked:

Im using:

"react": "16.13.1",
"react-dom": "16.13.1",
"react-scripts": "3.4.1",
"@types/react": "16.9.41",
"typescript": "3.9.6"

from light-bootstrap-dashboard-react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.