尝试使用Webpack部署我的第一个Vue.js项目

Having trouble with deploying my little web project. I used npm build/build.js to build my website to a project folder, making sure to change some paths in my code to be relative to the file and not the root '/'. I uploaded the files to my webhost (provided by my school). This webhost is running phpMyAdmin and MySQL server.

Things that need to be tackled as of now:

1. Fix my css. I used Bootstrap 4 to style my pages. Inside my .vue files I have code blocks of scss that I used to override bootstrap's scss variables. It looks like these blocks didn't take, making my built website appear differently from my dev version. I'm not sure how to go about fixing this.
2. Get my backend up and running. I use a .php file to pull data from a MySQL database using XAMPP on a localhost. I know I need to export my localhost db and import it into my webhost, which I can do. What I don't know is how the .php file gets handled during the build process. Do I need to manually add it somewhere on my webhost? I imagine once I can get it in the right location I'll be able to go in and change the server login settings.

Here's a screenshot of my app's (pre-build) Explorer and file structure. Here. Below is an example of variable overrides that didn't take hold. I imagine my problem has something to do with that import statement?

<style lang="scss">
$theme-colors:(
    "primary": #bd2d2d,
    "light": #ffeaea,
    "dark": #ffcece
);

$enable-shadows: true;


@import "node_modules/bootstrap/scss/bootstrap";
</style>