{"action":"created","issue":{"url":"https://api.github.com/repos/creativetimofficial/vue-light-bootstrap-dashboard-pro/issues/20","repository_url":"https://api.github.com/repos/creativetimofficial/vue-light-bootstrap-dashboard-pro","labels_url":"https://api.github.com/repos/creativetimofficial/vue-light-bootstrap-dashboard-pro/issues/20/labels{/name}","comments_url":"https://api.github.com/repos/creativetimofficial/vue-light-bootstrap-dashboard-pro/issues/20/comments","events_url":"https://api.github.com/repos/creativetimofficial/vue-light-bootstrap-dashboard-pro/issues/20/events","html_url":"https://github.com/creativetimofficial/vue-light-bootstrap-dashboard-pro/issues/20","id":321964484,"number":20,"title":"Sweetalert styling overrides not working when following docs","user":{"login":"jbreuer95","id":5371337,"avatar_url":"https://avatars2.githubusercontent.com/u/5371337?v=4","gravatar_id":"","url":"https://api.github.com/users/jbreuer95","html_url":"https://github.com/jbreuer95","followers_url":"https://api.github.com/users/jbreuer95/followers","following_url":"https://api.github.com/users/jbreuer95/following{/other_user}","gists_url":"https://api.github.com/users/jbreuer95/gists{/gist_id}","starred_url":"https://api.github.com/users/jbreuer95/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jbreuer95/subscriptions","organizations_url":"https://api.github.com/users/jbreuer95/orgs","repos_url":"https://api.github.com/users/jbreuer95/repos","events_url":"https://api.github.com/users/jbreuer95/events{/privacy}","received_events_url":"https://api.github.com/users/jbreuer95/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-05-10T15:01:42Z","updated_at":"2018-05-17T11:33:35Z","closed_at":null,"author_association":"NONE","body":"The docs say to import sweetalert like this:\r\n```\r\nimport swal from 'sweetalert2'\r\nimport 'sweetalert2/dist/sweetalert2.css'\r\n```\r\n`import swal from 'sweetalert2'` already imports the CSS.\r\n\r\nAnd since this is loaded after the global CSS the overrides no longer work.\r\n\r\nTo make the overrides work I import the CSS in the sass file like this:\r\n```\r\n@import \"~sweetalert2/dist/sweetalert2.css\";\r\n@import \"./now-ui-dashboard.scss\";\r\n```\r\nAnd then only import the js like this:\r\n`import swal from 'sweetalert2/dist/sweetalert2.min'`\r\n\r\nThis way the icons, for example, don't get way too big. \r\n\r\nI think the docs could reflect this distinction.\r\n\r\nYou can also see it in the live preview on the sweetalert page with the \"A warning message, with a function attached to the \"Confirm\" Button...\" Here the sweetalert CSS overrides your CSS rules.\r\n\r\nPs. for that to properly work you also need to add this CSS:\r\n```\r\n.swal2-icon .swal2-icon-text {\r\n    font-size: 60px;\r\n}\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/creativetimofficial/vue-light-bootstrap-dashboard-pro/issues/comments/389835778","html_url":"https://github.com/creativetimofficial/vue-light-bootstrap-dashboard-pro/issues/20#issuecomment-389835778","issue_url":"https://api.github.com/repos/creativetimofficial/vue-light-bootstrap-dashboard-pro/issues/20","id":389835778,"user":{"login":"cristijora","id":15955045,"avatar_url":"https://avatars2.githubusercontent.com/u/15955045?v=4","gravatar_id":"","url":"https://api.github.com/users/cristijora","html_url":"https://github.com/cristijora","followers_url":"https://api.github.com/users/cristijora/followers","following_url":"https://api.github.com/users/cristijora/following{/other_user}","gists_url":"https://api.github.com/users/cristijora/gists{/gist_id}","starred_url":"https://api.github.com/users/cristijora/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cristijora/subscriptions","organizations_url":"https://api.github.com/users/cristijora/orgs","repos_url":"https://api.github.com/users/cristijora/repos","events_url":"https://api.github.com/users/cristijora/events{/privacy}","received_events_url":"https://api.github.com/users/cristijora/received_events","type":"User","site_admin":false},"created_at":"2018-05-17T11:33:35Z","updated_at":"2018-05-17T11:33:35Z","author_association":"CONTRIBUTOR","body":"Hello @jbreuer95 \r\nGood point and thanks for the detailed information here. We will add this in the next update for sure."}}
{"actor":{"display_login":"cristijora"}}