The priority of styles after assembly has changed. How to fix?

Question

npm

<script>
import 'normalize.css/normalize.css'
import 'materialize-css/dist/css/materialize.min.css'
import 'materialize-css/dist/js/materialize.min.js'
import sidebar from './components/sidebar'
import main from './components/main'

export default {
  computed: {
    lists () {
      return this.$store.getters.lists
    }
  },
  components: {
    sidebar,
    mymain: main
  }
}
</script>

<style lang="scss">
...................
  .btn {
    margin-right: 20px;
    height: 27px;
    padding: 0px 8px;
    line-height: 27px;
    &:hover{
      background-color: #ff9d45;
    }
    &:last-child {
      margin-right: 0;
    }
    &-edit {
      background-color: #2979ff;
    }
    &-delete {
      background-color: #e53935;
    }
    &-complete {
      background-color: #00c853;
    }
  }

Please tell me how to solve the problem.
After the production build, the styles of the material object take precedence over those in the module.
Installed via npm
As I understand it, webpack just inserts imports at the end, so they have the highest priority, how can I solve this?

Answer 1

If I correctly understood your "problem", then it is solved very simply. It is enough to set the scoped
attribute in the block with styles - https://vue-loader.vuejs.org/guide/scoped-css.html . This way you will limit the scope for the styles of this component to only this component . And when assembling, there will be no problems with style priorities. Here is a comparison of how to style a component in React.js and Vue.js (Component-Scoped CSS section) - https://vuejs.org/v2/guide/comparison.html .