Изменился приоритет стилей после сборки. Как исправить?

Question

[ivankirshin]

<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;
    }
  }

Подскажите, как решить проблему.
После продакшн сборки стили материазайла становятся приоритетнее, чем те, что в модуле.
Устанавливал через npm
Как я понял, webpack просто вставляет импорты в конец, поэтому у них наивысший приоритет, как можно это решить?

Comments

[Дмитрий Беляев]

импортить из scss не вариант?

[ivankirshin]

Дмитрий Беляев, удивительно, что решение было таким простым. Ладно я без опыта, но я и у много кого уже спросить успел, никто ничего не ответил)

Answer 1

[Moe Green]

Если я правильно понял Вашу "проблему", то она решается очень просто.

Достаточно в блоке со стилями установить атрибут scoped - https://vue-loader.vuejs.org/guide/scoped-css.html.

Тем самым Вы ограничите область видимости для стилей данного компонента только этим компонентом. И при сборке не будет проблем с приоритетами стилей.

Вот здесь - сравнение способов стилизации компонента в React.js и Vue.js (раздел Component-Scoped CSS) - https://vuejs.org/v2/guide/comparison.html.