Currently, I am developing a Vue app that is embedded within a page on a more traditional server-rendered website. The app is contained within the following container:
<div id="account-summary-container"></div>
During local development, everything runs smoothly. However, once the app is integrated into the website, there are significant style conflicts because both my app and the site's styles are global. This results in my app affecting the styling of the entire website.
I am seeking a solution to scope all styles within my app to be localized to the selector where my app is rendered.
My app utilizes Bootstrap 4 styles, which are loaded using css-loader.
In my webpack.config.js file, I have entrypoints defined as:
entry: {
app: ["./src/scss/styles.scss", "./src/app.js"]
},
The contents of styles.scss include:
@import '~bootstrap/scss/bootstrap';
@import '../css/feather.min.css';
@import '../css/icomoon-spinners.css';
@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900');
@import 'helpers/variables';
@import 'helpers/mixins';
@import 'helpers/placeholders';
...
I have considered using css-modules as a potential solution. However, I am struggling to instruct css-loader to localize all styles specifically to #account-summary-container. My attempt in styles.scss resulted in an error message:
Error: composition is only allowed when selector is single :local class name not in ":local(#account-summary-container)", "#account-summary-container" is weird
This setback has led me to question if my approach is incorrect. Ideally, I would like to avoid extensive rewriting of styles.