Adding Custom CSS and JS

[elie-h]

What's the best way on adding custom .css and .js files, I added my files into assets, but they don't seem to be in effect.

[nickjj]

When adding new files you would have to restart the webpack dev server.

[elie-h]

So if I add a .js file into catwatch/assets/scripts, Its contents should be available in all templates after restarting & rebuilding assets correct?

Also where is the javascript called? I can't find any javascript in any of the jinja2 templates.

[nickjj]

It's bundled into a single file and included at the footer of the layout: https://github.com/nickjj/build-a-saas-app-with-flask/blob/master/catwatch/templates/layouts/base.jinja2#L43

All of the JS is in here: https://github.com/nickjj/build-a-saas-app-with-flask/tree/master/catwatch/assets/scripts

All of it is handled through webpack here: https://github.com/nickjj/build-a-saas-app-with-flask/blob/master/config/webpack.config.js

[elie-h]

I added custom CSS and JS files. The css has taken effect, but the JS file doesn't seem to have an effect. I don't think it's being used by webpack. Do I have to import it or register it anywhere?

[nickjj]

What does the JS do?

You'd have to add it to this list: https://github.com/nickjj/build-a-saas-app-with-flask/blob/master/config/webpack.config.js#L54-L56

[elie-h]

Just the JS file for Bootstrap Switch: http://www.bootstrap-switch.org/ If I load the script manually it works fine in the browser.

I've done the following in webpack.config.js:

app_js: [ 'bootstrap-switch', path.join(contextRoot, assets.scripts.path, 'entry.js') ],

But that doesn't seem correct.

[nickjj]

Oh, it's a vendor JS.

In that case, follow this example by basically copy/pasting that and changing the file name: https://github.com/nickjj/build-a-saas-app-with-flask/blob/master/config/webpack.config.js#L63-L64

It's the same situation where I'm using a third party JS library. It has CSS too. Just place the files in the same directories as the eonasdan-bootstrap-datetimepicker lib in the webpack config.

[treldor]

wrong three

[elie-h]

?? Adding to Vendor worked. Closed.