How to add bootstrap and custom themes?

Where should we place the bootstrap and custom themes files?

• add as vendor files?
• use webpack to compile a separate .css file?
• or ??

Thanks!

P.S.: I am using the v3.0.0 branch

[holoiii]

The solution that worked for me is creating a folder structure like this in the root of the project:

vendor/
  css/
    bootstrap.min.css
  fonts/
    (all the font files)

And inside the entry point of webpack (currently /app/app.js), add the following:

import '!!style-loader!css-loader!../vendor/css/bootstrap.min.css';

What this does is strip out the configured loaders for this specific css file, and then use only the style-loader and css-loader. This is necessary because the configured css-loader had modules turned on, which caused bootstrap’s styles to be namespaced and thus not show up properly.

Hope this helps - took me a while to figure out!

[mxstbr]

That is a good question, there is a few ways to do this.

The easiest one and what I’d go for is:

1. Add a separate themes or styles folder.

2. Import your .css files with the file loader like so

   import 'file?name=[name].[ext]!customstyles.css' from '../styles/customstyles.css';`
   

3. Reference that CSS file in your HTML:

   <link href='mypath/customstyles.css' />
   

Hope that helps & works!