Remove Bootstrap

[sylvaincaillot]

Probably a noob question but I am trying the Vue.js template and I would like to use the Element UI instead of Bootstrap:

I have removed the import line from the boot.ts file:

//import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
import ElementUI  from 'element-ui';
import 'element-ui/lib/theme-default/index.css';

I have uninstalled the bootstrap npm package and clean the package.json file:

{
  "name": "Vue trial",
  "version": "0.0.0",
  "devDependencies": {
    "@types/requirejs": "^2.1.28",
    "aspnet-webpack": "^1.0.27",
    "awesome-typescript-loader": "^3.0.0",    
    "css-loader": "^0.25.0",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "file-loader": "^0.9.0",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.1.1",
    "style-loader": "^0.13.1",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.7",
    "vue": "^2.2.2",
    "vue-class-component": "^5.0.2",
    "vue-loader": "^11.1.4",
    "vue-property-decorator": "^5.0.1",
    "vue-router": "^2.3.0",
    "vue-template-compiler": "^2.2.2",
    "webpack": "^2.2.0",
    "webpack-hot-middleware": "^2.12.2"
  },
  "dependencies": {
    "element-ui": "^1.4.1",
    "moment": "^2.18.1"
  }
}

I have also edited the webpack.config.vendor.js to remove references to bootstrap and bootstrap.css:

entry: {
            vendor: [
                //'bootstrap',
                //'bootstrap/dist/css/bootstrap.css',
                'event-source-polyfill',
                'isomorphic-fetch',
                'jquery',
                'vue',
                'vue-router'
            ],
        },

I have then run webpack --config webpack.config.vendor.js to regenerate the vendor.js.

However, my template is still bootstrapped. What else can I do to get rid of Bootstrap?

Thank you for giving me some directions

Sylvain

[PaluMacil]

It should be gone after the steps you described. If you have classes in your html from bootstrap, you might want to delete them, but it isn't pulling any dependency from having class attributes hanging around.

You'll still see the word "bootstrap" used as a verb, unrelated to the frontend design library you're referring to. The act of picking an entry point for Angular to take your stuff and process it into an Angular app is called "boostrapping", so that might be what you're seeing. I don't know if Vue uses the same bootstrap term to talk about the entrypoint concept.

If I'm assuming wrong, why do you think you still have bootstrap?

[sylvaincaillot]

Thank you @PaluMacil for your reply.
This is what I thought. I know that bootstrap is also a generic word but my issue is that if I have the following html code with Bootstrap classes, it is still display with the Twitter bootstrap look and feel:

<a href="#" class="nohover btn btn-large btn-primary inline_block"> TEST </a>

I have removed the caches on my browser so I don't understand what I am missing.

S.

[sylvaincaillot]

OK, it comes from the vendor.css in wwwroot/dist folderwhich contains the integrality of bootsrap.css.

By running webpack --config webpack.config.vendor.js, if the webpack.config.vendor.js does not contain any css, the former vendor.css is kept even if the associated css (bootsrap.css) have been removed. This is why it was still laying down in my project.

Thank you
S.

[hnviradiya]

@sylvaincaillot . So what u did? deleted vendor.css? I am facing same issue. I have precompiled version to use instead of compiled one. And i am having this same.