I've developed a customized CSS framework to streamline the design process across all my internal projects. The central file is structured as shown below:
@import "~normalize.css/normalize.css";
@import "_variables.scss";
@import "_mixins.scss";
@import "_elements.scss";
@import "_styledElements.scss";
@import "_aux.scss";
@import "_base.scss";
@import "_composedElements.scss";
@import "_layouts.scss";
The normalize.css file contains specific button styling rules, such as:
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
In the _elements.scss file, I have established the default button style:
button {
font-size: 1em;
height: 40px;
-webkit-appearance: none;
background-color: $mainColor;
color: $geophy-white;
text-transform: uppercase;
outline-color: $uiColor;
border: none;
padding: 2px 12px;
cursor: pointer;
border-radius: 2px;
font-family: $condensed;
&:hover {
background-color: darken($mainColor, 20%);
color: $geophy-white;
}
&--disable {
opacity: 0.8;
&:hover {
}
}
}
Everything functions smoothly: I compile my project, import the main SCSS file, and voila! However, I encounter an issue when the HTML element is situated within an external Vue component, causing normalize.css to override my custom library styles. Here's an illustration of the problem:
CSS in External Vue Component:
CSS in Internal Vue Component:
How can this be rectified?